Adjusting margins and padding | PracticalSeries: Web Development

6.3 Adjusting margins and padding

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:

style.css

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

Code 6.2 style.css (asterisk selector & box-sizing)

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.3 Removing margins with * selector

Figure 6.4 -Default browser margins — 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.

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

Code 6.3 style.css (adding margins)

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

6.3.1 Margin and padding properties

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:

	PROPERTY	Meaning
	`margin-bottom: 20px;` `padding-bottom: 20px;`	Sets the bottom margin or padding to the specified value
	`margin-left: 20px;` `padding-left: 20px;`	Sets the left margin or padding to the specified value
	`margin-right: 20px;` `padding-right: 20px;`	Sets the right margin or padding to the specified value
	`margin-top: 20px;` `padding-top: 20px;`	Sets the top margin or padding to the specified value
	Table 6.1 Setting individual margin and padding values

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

PROPERTY Meaning

	PROPERTY	Meaning
	`margin: t r b l;` `padding: t r b l;`	Sets all four margin or padding properties in one go: t is the top measurement, r the right, b the bottom and l the left.
	As an aid to remembering the order of the margins, think of the word “trouble”, this has the starting letter of each property in the correct order:TRouBLe — T R B L. When specifying margins or padding with the above property, it is not necessary for each margin to be specified with the same units. For example, the following is perfectly acceptable: `margin: 0 10px 2rem 5%;`
	Table 6.2 Setting all margin or padding values at one go

margin: t r b l;
padding: t r b l;

Sets all four margin or padding properties in one go:
t is the top measurement, r the right, b the bottom and l the left.

As an aid to remembering the order of the margins, think of the word “trouble”, this has the starting letter of each property in the correct order:TRouBLe — T R B L.

When specifying margins or padding with the above property, it is not necessary for each margin to be specified with the same units. For example, the following is perfectly acceptable:
margin: 0 10px 2rem 5%;

Table 6.2 Setting all margin or padding values at one go

The margin and padding properties have further flexibility:

	PROPERTY	Meaning
	`margin: 60px;` `padding: 60px;`	Sets all four margins or padding properties to the same value (60px in this case)
	`margin: tb rl;` `padding: tb rl;`	Sets the margin or padding properties in pairs: tb is the value for both the top and bottom, rl is the value for both the right and left.
	Table 6.3 Short cuts for setting the same margin or padding values

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