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.