You know how when your cat gets on the sofa with you and even though they are very small they take up a lot of room because there’s this space around them that you feel like you don’t want to intrude on?
No.
Aria with such a large margin no one else can use the sofa.
Well there is something very much like this in CSS which helps you position HTML elements just the way you want.
In CSS you can you use a property called margin to control where HTML elements sit on your pages. The margin is the space around the outside of the element and by controlling this you can control where each element is on your page.
Going back to our example of a cat on a sofa, a small margin means there is a little bit of space around the cat where no one else can sit.
And a big margin means this area is large.
Most elements have some margin already, so the HTML elements on your page aren’t positioned too close together. But you can use CSS to change these margins and position your elements how you want to.
This all sounds great.
Especially the part about me on a sofa with lots of space to myself.
But how do you control the margins? Are all margins the same?
There are actually lots of ways to set your margin in CSS as there are several properties you can use. Let’s say you wanted to add some space between one HTML element and the next one underneath it. You can set the space underneath an element with the margin-bottom property in CSS which looks like this.
margin-bottom:
Or if you wanted to move an element away from the edge of a page you could use the margin-left property.
margin-left:
As you might expect there is CSS properties for setting the top margin and the space to the right on an element too.
margin-top:
margin-right:
You can use these properties to set specific margins in short statements that are easy to read.
But how big or little is the margin?
Remember when we looked at height and width we used pixels, a percentage or viewheight or viewwidth to set the height or width of an element? Well you can use these units of measurement again to set the margins.
Perfect!
I’m ready to start setting all of these properties.
Wait one minute my feline companion.
There is a way to set all four of these margin properties with just one line of CSS.
As well as the margin-left, margin-right, margin-top and margin-bottom CSS properties, there is also one simply called ‘margin’ and you can use it to set all margins in one line.
Here is an example, of using the margin property in CSS.
margin: 50px;
This one line will set the margin all around your HTML element to 50 pixels. The advantage of this is that the code is really easy to read and that the margin all around the element can be changed very simply.
Here is an example of some text where the third paragraph has this margin. The box and the shading is there to help show the space around the paragraph elements
Normal people using a sofa. Happy to share the space.
Normal people using a sofa. Happy to share the space.
Aria on the sofa. Needs her space.
The disadvantage of this is that this method doesn’t give you much control. What if you wanted a different margin on the top and bottom?
Well you could write more CSS, right?
Yes but it sort of defeats the point of setting all your margins in one line.
Your code could become awkward to read and confusing.
Fortunately, there is a way you can do this still just using the margin property.
You can set your top and bottom margin to be different from the margin to the left and right of your element by using two values when setting the margin property.
margin: 25px 100px;
With those code, the top and bottom margin is 25 pixels while the margin to the left and right will be 100px. This is quite a neat way of having a bit more control over setting your margins.
This is a very common way of setting margins as gives your page a sort of symmetrical look.
A less common approach is to set margin with three values.
margin: 25px 100px 50px;
While this is less common, it’s still a fair approach and still gives you a symmetrical look. This is because the middle value sets your left and right margin so your elements won’t be off center. The first value sets the top margin and the last value sets the bottom margin.
The last way, and the way that gives you the most control is to use four values.
margin: 25px 100px 50px 120px;
Here the margins are set starting with the first value setting the top margin and then working clockwise. So the second value sets the right margin, the third value sets the bottom margin and the final value sets the left margin.
I even thought up an easy way for you to remember this. Just remember:
Tired. Rub Belly Lots.
The first letters of these words will help you remember that the margin values set the top, right, bottom and then left margin.
That is pretty easy.
Tired. Rub belly lots?
That’s exactly right.
No, I was asking, sort of.
Please rub my belly lots.
She doesn’t need help remembering to ask for belly rubs.
Try using the box below to change the margins around Aria’s picture.
#aria-belly-rub-please {
width: 30%;
height: auto;
margin:
}
What do you notice if you set the margin to be very high?
You'll notice that if the picture goes outside of the box then it disappears rather than changing size to fit within the box with the margins you've set. This is because the height and width have already been set in CSS.
Let’s talk through some practical uses of setting the margins of your HTML elements with CSS.
You may want to use margins to separate out paragraphs more. To do this, you are going to want to control the bottom margin. By default there is already a 10px margin on the bottom of your paragraph elements so they don’t squash together.
Try using the box below to set your own bottom margin and see how it affects the space between the two paragraphs. Experiment and find what you think looks good.
.example-margin-paragraphs {
margin-bottom:
}
Are we taking up too much room?
Or do we need more space?
Well this has been really good!
I’m going to go lay in the middle of the sofa and have a nap.
Wake me up for lunch.
You’ve just given me an idea!
Aria going to lay in the middle of the sofa has given me an idea. Let’s look at how to put elements, like pictures, in the center of your page with CSS.
We already know how to center text using the ‘text-align’ property in CSS but that doesn’t help us with photos.
We’ve looked at setting margin with pixels but percentages and viewwidths can be really useful here. It’s worth remembering that when setting margins in CSS, the percentage value is actually a percentage of the width of the element sits in; even if you are setting top or bottom margins.
So let’s say you have a picture with its width set to 40% and we want the photo to be in the center of our page.
width: 40%;
We know that the full width of the screen is 100% and our image currently takes up 40% of that.
40% is far less than what Aria uses of the sofa.
So there is 60% (100% - 40%) of the screen width left to use to set our margins. At the moment, with no margin set, the image will be on the far left of the screen with lots of space to the right of it.
As we want our photo to be in the center of the page, we want the same margin on the left and on the right. So we split the leftover width, which we calculated to be 60%, evenly between the left and right margin. This means we need to set margin-left and margin-right to 30% as 60% divided by two is 30%.
width: 40%;
margin-left: 30%;
margin-right: 30%;
A quick way to check if your image will be centered is to add up the width of your photo and the margins on the left and right. If this adds up to 100% and the margin-left and margin-right values are the same then the image will be in the middle of the page.
#aria-got-stuck-photo {
width: 30%;
height: auto;
margin:
}
And that’s how you use margins!
There was a lot to go over here but that is because you will likely use margins in CSS a lot to position HTML elements, especially image elements, to be where you want them to be. Remember you can use separate margin properties in CSS if you prefer or you can set all the margins in one line with the margin property and the useful reminder.
Tired. Rub Belly Lots?
That’s right.
No. I’m asking you!
You’re still not getting this!