Spacing

Now that we’ve added some colour, it makes the awkward spacing around elements a bit more obvious.

Let’s fix that! Again, we’ll start at the top and work our way down.

Step 1

At the moment, the nav is exactly as tall as the text inside it. Let’s add some space between the end of the nav and the text. We can do this using the padding property.

Add the following to your css:

/* Your CSS here */

nav {
	background-color: #87CEEB;
+	padding: 10px;
}

Step 2

Let’s also modify the padding of the header div to add space around the image:

/* Your CSS here */

nav {
	background-color: #87CEEB;
	padding: 10px;
}

+header div {
+	padding: 20px;
+}

Step 3

Next let’s add some space around section-2:

/* Your CSS here */

nav {
	background-color: #87CEEB;
	padding: 10px;
}

header div {
	padding: 20px;
}

+#section-2 {
+	padding: 20px 0px;
+}

Did you notice how we did this padding a little differently? Instead of specifying one value, we provided two, i.e. padding: 20px 0px; rather than padding: 20px.

Padding actually takes 4 values: top, right, bottom, left.

Often we want to add the same amount of padding to all four sides of an element, so we can usepadding: 20px as shorthand for padding: 20px 20px 20px 20px.

We also often find ourselves wanting one amount of padding for the top and bottom of an element, and a different amount for the left and right. padding: 20px 0px; is short hand for padding: 20px 0px 20px 0px; and means “use 20px of padding for the top and bottom, and none for the right and left`.

Step 4

The next section has the cards.

First, let’s add padding to the section itself:

#section-3 {
	background-color: #885A89;
+	padding: 20px;
}

Step 5

Step 6

So far we’ve used padding to put space in an element. In other words, padding is the space between an elements border and the content inside it.

But what if we wanted to put space between elements? We can use margin to achieve this.

Try adding the following to your CSS:

.card {
	height: 250px;
	width: 25%;
	display: inline-block;
	vertical-align: middle;
	background-color: #fff;
	padding: 10px;
+	margin: 0 10px;
}

You might find this graphic useful in comparing margin and padding:

(We’ll get to the border property shortly…)

Here’s what your page should look like so far: