Bounding box

A bounding box is a rectangular border around a website element (e.g., a heading, paragraph, or image) that appears during the design process. These boxes usually have contact points at every corner and in the center of each side to let designers manipulate elements’ sizes and shapes more precisely.

In web design, we call using bounding boxes, or putting every element in its own box, the box model. The boxes can overlap or interact as you change their size and shape, depending on the element type. If you’re manipulating elements that can’t overlap, increasing the width of one box might push the box next to it down or to the side to make space. 

Webflow automatically creates a bounding box when you introduce a new element. You can then manipulate the box's borders, size, and spacing to create the effect you want in your design.

A new way to learn and to build for the web

Get the best, coolest, and latest in design and no-code delivered to your inbox each week.

Shoot, something didn't work. Try again later, bud.