css thumbnailIn this lesson we learn about three of the most important CSS styles for positioning on our web pages: Padding, Border and Margin.In the last lesson we first learned about ‘padding’ and saw how it adds extra space to the inside of a HTML element. Let’s look at this now in more detail.

This may look complicated, but once you understand how these four pieces fit together you will have a great understanding of how HTML elements are displayed on the page.

Use the buttons below to navigate through the lesson

img0
img1
img2
img3
img4
img5
img6
img7
img8
img9
img10
img11


Each HTML element has “content”. This is the text or images or whatever is in the actual element.CSS4-1

e.g. <span>My content goes here inside the tag!</span>

The sentence “My content goes here inside the tag!” is the content of the span element.

If we don’t do anything special to the tag then it will just display as a ‘normal’ sentence.

But we can apply CSS rules to it. Let’s give it an ID first so we can apply a rule easily:

<span id=”testSpan”>My content goes here inside the tag!</span>

This appears like this on the page:

CSS4-2

Let’s add a border by applying some CSS:

#testSpan { border: 1px solid black; }

Now it appears like this:

CSS4-3
By now you’re familiar enough with CSS that you can probably guess how the border tag works. The first part of it is the border thickness, in this case “1px”. Then there are some definitions for how the border could appear – dotted, solid, etc. Then finally a colour, which can be a named colour or a hexcode, like we saw in the last lesson.

So we could say:

#testSpan { border: 6px dotted #FF0000; }

And this looks like this:

CSS4-4

In this case it’s a thicker border: 6px, instead of 1px. And it’s dotted instead of solid. And you remember that #FF0000 is the hexcode way of saying “all red, and no green or blue” – in other words, red!

For simplicity I’m going to reduce my border back to solid and only 2px:

#testSpan { border: 2px solid #FF0000; }

CSS4-5

Now we can see where the border goes compared to the content. As you might expect, it goes all around!

Let’s look at how padding affects the element. We remember from the last lesson that padding adds space inside the element.

#testSpan { padding: 10px; border: 2px solid #FF0000; }CSS4-6
So now we have 10 pixels of space between the content and the border.

What if we wanted 10px on the top, but not on the bottom?

Well, there are two ways of doing that. We could specify only padding on the top, like this:

#testSpan { padding-top: 10px; border: 2px solid #FF0000; }

CSS4-7

Or we could specify it using the padding tag with some extra inputs, like this:

#testSpan { padding: 10px 0px 0px; border: 2px solid #FF0000; }

CSS4-8

Both of these have the same effect.

This is because with padding, border and margin, you can specify different values for “top”, “bottom”, “left” and “right” by putting “-top” after the name of the style.

For example:

padding-right: 3px;

Sets a padding to 3px on the right only.

Or “border-bottom: 5px solid yellow;” puts a solid yellow border 5 pixels thick only on the bottom.

If we just write “border” or “padding” without specifying a direction then the browser assumes we mean all four directions. So “padding: 10px;” is a short way of saying:

“padding-right: 10px; padding-top: 10px; padding-bottom: 10px; padding-left: 10px;”

Each style also allows us to use shorthand.

If we put just one value, it applies to all four directions.

If we put two values, then the first applies to top/bottom, and the second applies to left/right.

For example:

Padding: 10px 200px; looks like this:

CSS4-9
Top and bottom both get 10px, and left and right both get 200px.

What about three values?

Padding: 10px 200px 60px; looks like this:

CSS4-10
Top gets the first value (10px), left and right both get the second value (200px) and bottom gets the final value (60px).

And all four allows us to put a different value on each direction:

Padding: 10px 200px 60px 45px;

CSS4-11

So we can set a different value for each. This helps us to position text, elements etc within other elements.

What about Margin?

We have seen that padding adds space inside an element. Margin does the same for outside the border. Remember how they all fit together?

CSS4-1

So increasing the margin puts space between our element and any other elements.

Just like padding, margin can be specified as margin-top, margin-bottom, etc. And it uses the same shortcuts as padding, so “margin: 10px” means “put a 10 pixel margin around the whole element”.

Now we understand how to space out the elements on our page!


Comments

Padding, Border and Margin in CSS — 12 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *