My Logo

My amazing HTML site

About the box model

The box model is the way that a browser reasonably understands how size and shape of objects is defined and presented on the screen.

It essentially refers to a box that wraps around every HTML element, and it consists of a number of key visual properties and settings: margins, borders, padding, and the actual content of the box.

box model diagram

The browser decides how or what default visual properties to apply to the box in tandem with the display css property.

For a full box to apply to an object its display property must be set to block, either by you or by the browsers default user agent style sheet.

selected-object {
display: block;
}

Not all HTML objects have display set to block by default. Some are inline elements and some are set to table or table-cell etc.

Let's play and undertstand the box model here.

I am a box

Adding up the box model correctly

When the layout gets more complex with more complex objects you'll need to add up the box model properly or layout could break.

This aplies to both fixed sized objects and liquid objects.

I am another box

Boxes in boxes

Inner box