6The CSS box model

The box model is a stan­dard ap­proach to mak­ing web­sites, it al­lows web­site con­tent (text, im­ages, links &c.) to be lo­cated in ‘boxes’ that are sep­a­rate from each other.

The size of a box (height and width) can be spec­i­fied ex­actly, al­low­ing the page lay­out to be ac­cu­rately con­trolled.

In ad­di­tion to the height and width, each box has three prop­er­ties for each side of the box, these de­ter­mine the spac­ing of boxes and el­e­ments within them (Fig­ure 6.2):

Figure 6.2   The CSS box

These are:

1. Mar­gin: this is the dis­tance out­side the bor­der be­tween this and other boxes

2. Bor­der: this is a bor­der around the box, a line, the thick­ness, colour and type (solid, dashed &c.) of which can be spec­i­fied

3. Padding: dis­tance in­side the box be­tween the bor­der and con­tent

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

The de­fault arrange­ment for a block el­e­ment is that it is based on the di­men­sions of the con­tent of the box (rather than the di­men­sions of the box it­self). This is a pain in the arse (that’s “ass” for our transat­lantic colonies), it means that the ac­tual size of a box (the width or height) is as fol­lows:

This is slightly counter in­tu­itive, since the width and height you set for an el­e­ment both go out of the win­dow as soon as you start adding padding and bor­ders to the el­e­ment.

For­tu­nately CSS 3 pro­vides a so­lu­tion with the box-siz­ing prop­erty:

The way box siz­ing should work is that the width and height prop­er­ties de­fine the width and height of the box to the out­side edge of the bor­der (as shown in Fig­ure 6.2), this is sort of the re­verse of the orig­i­nal, i.e.:

This means that if the con­tent is too big for the box, the con­tent that doesn’t fit won’t be dis­played.

To make this hap­pen (and be­cause we want every box on the web­site to be­have like this) we will apply the box-siz­ing prop­erty to the as­ter­isk se­lec­tor:

* { 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

So what have we done here?

By using the as­ter­isk se­lec­tor to set the box-siz­ing prop­erty to bor­der-box:

    box-sizing: border-box;

We have made every block el­e­ment on the web page be­have in the way we want it to; i.e. we’ve made the width and height prop­er­ties de­fine the width and height of the box, not the con­tent—as spec­i­fied in equa­tion (6.2).

I’ve also set the de­fault mar­gins and padding (all of them: top, bot­tom, left and right) to zero (I don’t have to spec­ify a unit—rem, em, px or %—with a value of zero, they all do the same).

The rea­son for doing this is that if I don’t spec­ify a value for mar­gin and padding, browsers have a habit of ap­ply­ing their own de­fault val­ues (and these are not all the same) so, I’ve set the mar­gins and padding to zero for every block el­e­ment, this value can then be changed by adding an­other class to a par­tic­u­lar el­e­ment.