6The CSS box model

Let’s add the asterisk selector with the box-sizing, padding and margin setting (§ 6.2.1) to our CSS file (add it at the start). Thus:

* { 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
        font-family: helvetica Neue, arial;
        font-size: 18px;
}
h1 {
    color: #008000;
    font-size: 40px;
}
h2 {
    color: #ff0000;
    font-size: 40px;
}
p {
    text-align:justify;
}

.main-text {
    text-align: justify;
    color: #606060;
}

.author-text{
    font-size: 22px;
}

Now we haven’t changed any of the HTML, so what does this do to the website? (Figure 6.3).

Figure 6.3   Removing margins with * selector

Figure 6.4   Default browser margins

Comparing this with the website before this modification (Figure 6.4), we can see the default margins that were originally applied by the browser.

We must now add some margins back in for the headings and paragraph elements. This time we will do it by styling these with CSS.

h1 {
    color: #008000;
    font-size: 40px;
    margin-bottom: 20px;
}
h2 {
    color: #ff0000;
    font-size: 40px;
    margin-bottom: 10px;
}
p {
    text-align:justify;
}

.main-text {
    text-align: justify;
    color: #606060;
    margin-bottom: 20px;
}

And we get some of the margins back (Figure 6.5):

Figure 6.5   CSS Margins

There are lots of different ways to change the margin and padding properties. They can be changed individually (as we did in the last example) with the commands:

All of the margin and padding values can be assigned in one go:

The margin and padding properties have further flexibility:

• Where a property can have multiple settings (as in the margin property above), the individual margin values are referred to as components of the overall value (i.e. the four margin settings in Table 6.2 are components of a single value for the property). Components are generally separated by a space).