The Box Model

The Box Model describes how block elements are sized and spaced using CSS. The primary properties involved in determining the box model for an element are presented here.

Width & Height

By default, a block element is as wide as the container and as tall as the content it contains. Let's look at an example div that contains some text. (We'll give it a background color to make it easier to see the box.)

We can apply a set width and/or height to change the size however we want:

In the above example, try changing the values for the width and height properties.

However, we need to be careful about setting a height because if there is too much content, it will grow outside of the container:

So, in general, it's good to let height take care of itself in most cases.

Using a set height can cause problems if the text needs more lines than the height provides, so it is safest to leave the height to be automatically determined.

max-width/height & min-width/height

These related properties allow you to set a maximum width or height up to which an element may expand, or a minimum width or height down to which an element may shrink. These properties can be combined to work together:

Try resizing the demo preview window by grabbing the bottom right corner and dragging. Notice how element grows, but only up to 250px, and it shrinks, but only down to 200px.

Padding

Padding defines space within an element, between the edge of the box and the content the element contains. The simple padding property is shorthand for padding-top, padding-right, padding-bottom, padding-left. (Notice that the properties in the shorthand are ordered clockwise, starting at the top.)

In the demo above, try changing the values for padding on different sides of the element. Notice how the content is pushed away from the edges of the box.

There are also further condensed versions of the shorthand:

You can, of course, use the non-shorthand properties for individual sides:

Notice that the padding is added to the existing dimensions of the box, unless the box already fills its container (as in a full-width box), in which case it pushes the content in to make room for the padding.

Margin

Margin defines space around an element, between the element and its neighbors. As with padding, The simple margin property is shorthand for margin-top, margin-right, margin-bottom, margin-left. We'll need two divs for our demonstration.

In the demo above, try changing the values for margin on the various sides. Note how the boxes are spaced away from each other and from the edges of the preview window in response.

Notice that the divs are pushed away from each other and from the edges of the container (the body) by the amounts specified in the margin. Where there is room (like the vertical direction here), the margin is added to the space the box already uses. However, where there is no room (as in the horizontal direction, here constrained by the body), the margin pushes into the space the box uses.

All the same shorthand rules apply as with padding. The properties in the shorthand are ordered clockwise, starting at the top. The same three, two, and single value versions are available, and the same single-side properties are available.

Horizontal Centering with Margin

A handy feature of margin is that it allows horizontal centering of an element using the auto value, which simply takes up the available space. For example:

In the demo above, try resizing the preview window by grabbing the bottom tight corner and dragging. Notice how the element always stays horizontally centered.

Border

Border, no surprise, used to add a stroke to the outer edge of an element. It consists of three relevant properties:

In the demo above, try playing around with the different border values. See what happens when you change the color or the width. For the style, try out values such as dotted or dashed.

Border is applied outside of padding:

There is also a shorthand property for border (just border). The order of values is strict (and space-separated): border-width border-style border-color(optional).

There are also single-side versions of all border properties, including the shorthand:

As with padding and margin, border is added to the total size of an element, unless there is no room, in which case it pushes the content in to make room.

Box Sizing

As mentioned in the previous sections, by default, padding and border are added to the starting size of an element. This means that in cases where the size of a box is defined using width and/or height, if padding or border are added, the final size of the box is larger than the size originally defined. Like so:

As you can see, the div is larger than 50% of the width of the container because the padding and border are added to that.

With the box-sizing property, we can set the padding and border to push in from the defined size of an element rather than adding to it using the value border-box. This allows you to preserve your intended sizing:

With border-box applied, the box is now exactly 50% of the container and the padding and border have been added within that space.

This feature is incredibly useful.

Interactive Demo

Below is a little experiment where you can play with the box model properties and and get a sense of how they interact.

Outer Div Controls

Inner Div 1 Controls

Inner Div 2 Controls

Inner Div 1
Inner Div 2

Video Lesson

The following video demo is fully interactive. You can pause at any time to directly edit the code, and resume playback to restore to where you left off.

Practice Exercise

Open exercise in a new tab