Aria often claims certain areas of the sofa and when she decides that, for now at least, one spot is her favourite. This changes quite regularly and so is impossible to predict but she certainly lets you know. The thing is, she also claims the space around her as her own too, so eventually you are left with very little of the sofa to actually enjoy.
This is quite similar to how padding works in CSS.
Padding is essentially the space around an element, but it is different to margin which we looked at before. The margin is the space around the outside of an element, but padding is the space around an element but within its own border.
That’s confusing. Can I see an example?
Of the two boxes below, the one one left has a 100px margin all the way around. The box on the right has 100px of padding.
As you can see, the padding example has extra space around the element but this space is within the border and so has the same background colour.
When we looked at margins, we looked at Aria’s ‘No Human Zone’ she created when she sat on the sofa. This was because it was space around Aria. For padding, this ‘No Human Zone’ becomes ‘Aria’s Area’ because this is her space.
So how do we set padding?
Well first you need to know the CSS property, then you add a value and a unit of measurement, like pixels, percentage, viewwidth or viewheight.
For padding, the CSS is pretty easy to remember.
Is it: padding ?
It is.
padding:
This example will set a 100px padding all around an element.
padding: 100px;
Here is an example of a couple of paragraph elements inside a div with no margin and no padding.
Can we add my favourite background colour?
Of course!
HTML
<div id="salmon-box">
<p>Finally!</p>
<p>It's sofa time!</p>
</div>
CSS
#salmon-box{
padding: 0px;
margin: 0px;
background-color: salmon;
}
Finally!
It's sofa time!
Here is the same HTML but I’ve added 25px of padding to the div.
Finally!
It's sofa time!
You can see that before the div was just big enough to wrap around the paragraph elements and now there is a lot of extra space.
A more useful example might be to only add 10px of padding which is just enough to move the text away from the outer edge of the div.
Our previous example only had one value for padding; 100px. When this is the case, that padding is placed around the HTML element on every side. This code is a very quick way of adding even padding all around an element.
If you only want to add padding to a specific side of your HTML element you can use one of these padding properties:
padding-top:
padding-bottom:
padding-left:
padding-right:
Let me guess, padding-top adds padding only to the top of the element?
Yep, that’s right.
And padding-bottom adds padding only to the bottom.
Padding-left adds it only to the left of the element and padding-right adds padding only to the right hand side.
I think I deserve a treat for that.
I’m not so sure.
You might want to set the padding around an element so that the top and bottom padding is the same, but different to the left and right padding. To do this, you could use the four separate padding properties, like this:
padding-top: 20px;
padding-bottom: 20px;
padding-left: 50px;
padding-right: 50px;
This method is easy to read, but you can also do all of this in one line of code.
Before we only used one value with our padding property, but if you use two values the first number sets the top and bottom padding while the second sets the padding on the left and right. So this code could be written like this:
padding: 20px 50px;
You can even go as far as to set all four sides of padding to different values in just one line of code. Like this:
padding: 10px 25px 20px 50px;
But which number is for which side of padding?
I made a way for you to remember this.
Just remember:
Tired. Rub Belly Lots.
I can definitely remember that.
It is essentially my inner monologue condensed into four words.
Tired.
The first letters of this phrase will help you remember the order this padding is applied.
Here is how this code would effect the HTML element's padding.
One thing worth remembering, is the padding adds to the width and height of your HTML elements. This is because you are adding space within the element’s border and so this effectively makes the element bigger.
Let’s look back at our original example:
Notice how the example on the right is much larger because of the padding. This isn’t necessarily a bad thing, it’s just something worth remembering.
It’s quite clear to see how padding adds to element size in this next example. The paragraph elements below have no padding but do have a 10px margin all the way around.
margin: 10px;
padding: 0;
You know what I'm going to do later?
That's right. Lay in some dirt.
Then roll around on the bed.
Notice how there is a noticeable gap between each sentence.
In this next example, the text has no margin and instead has 10px of padding and so the elements are taller, as you can see from the background colour, and are positioned right on top of each other.
margin: 0;
padding: 10px;
You know what I'm going to do later?
That's right. Lay in some dirt.
Then roll around on the bed.
Below is some example HTML for an image inside a div. Feel free to edit the CSS below and see what effect adding padding has.
What happens when you add padding to the div? Is it different from adding padding to the image?
HTML
<div id="picture-frame">
<img src="aria_under_blanket.jpg">
</div>
CSS
#picture-frame {
width: 300px;
height: 200px;
padding:
border: 5px solid grey;
}
#aria-blanket {
width: 200px;
height: 150px;
margin: 0;
padding:
}
You know what has a lot of padding?
I know that tone.
You’re going to say something like ‘the duvet’ aren’t you?
Not something like that …
It’s the end of the lesson, so it’s nap time.