6The CSS box model


Box structure

The box model is a standard approach to making websites, it allows website content (text, images, links &c.) to be located in ‘boxes’ that are separate from each other.

The size of a box (height and width) can be specified exactly and adjusted dynamically, allowing the page layout to be accurately controlled.

In addition to the height and width, each box has three properties for each side of the box, these determine the spacing of boxes and elements within them (Figure 6.2):

Figure 6.2 - The CSS box
Figure 6.2   The CSS box

These are:

  1. Margin: this is the distance outside the border between this and other boxes

  2. Border: this is a border around the box, a line, the thickness, colour and type (solid, dashed &c.) of which can be specified

  3. Padding: distance inside the box between the border and content

This is the box model. It has one major problem: it doesn’t work like you think it does.

The default arrangement for a block element is that it is based on the dimensions of the content of the box (rather than the dimensions of the box itself). This is a pain in the arse (that’s “ass” for our transatlantic colonies), it means that the actual size of a box (the width or height) is as follows:

`"Box width"="width (content)"+"padding"+"border"`
`"Box height"="height (content)"+"padding"+"border"`

This is slightly counter intuitive, since the width and height you set for an element both go out of the window as soon as you start adding padding and borders to the element.

Fortunately CSS 3 provides a solution with the box-sizing property:


Box sizing

The way box sizing should work is that the width and height properties define the width and height of the box to the outside edge of the border (as shown in Figure 6.2), this is sort of the reverse of the original, i.e.:

`"Content width"="width"-"border"-"padding "`
`"Content height"="height"-"border"-"padding "`

This means that if the content is too big for the box, the content that doesn’t fit won’t be displayed.

To make this happen (and because we want every box on the website to behave like this) we will apply the box-sizing property to the asterisk selector:

* { 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
Code 6.1   style.css (setting box-sizing)

So what have we done here?

By using the asterisk selector to set the box-sizing property to border-box:

    box-sizing: border-box;

We have made every block element on the web page behave in the way we want it to; i.e. we’ve made the width and height properties define the width and height of the box, not the content — as specified in equation (6.2).

Box-sizing, other options
The box-sizing property can have three values:
Border-box The width and height includes content, padding and border, but not the margin
padding-box The width and height includes content and padding, but not the margin or border
The width and height properties include only the content. Border, padding, and margin are not included

content-box is the default value (described in § 6.2.1).

padding-box is not well supported by web browsers (currently only Firefox) so don’t use it.

I’ve also set the default margins and padding (all of them: top, bottom, left and right) to zero (I don’t have to specify a unit, i.e. rem, em, px or %, with a value of zero, they all do the same).

The reason for doing this is that if I don’t specify a value for margin and padding, browsers have a habit of applying their own default values (and these are not all the same) so, I’ve set the margins and padding to zero for every block element, this value can then be changed by adding another class to a particular element.

End flourish image