6The CSS box model

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, 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

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:

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:

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.:

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;
}

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).

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—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.