Posts tagged Web Design

Today we’re going to continue our journey into the Box Model. If you aren’t familiar with this box model, you should read about it!

Padding

Padding — defines the space between the element border and element content and will be the same color as the background color of the element.
If we recall that in the box model we have margins > borders > padding > content so Padding is tertiary. Let’s assume you have an HTML paragraph element:

1
2
3
4
5
6
7
8
9
10
11

<!--No Padding-->
<p style="background-color:#fff;">Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
<!--With padding-->
<p style="background-color:#fff; padding:10px;">Lorem ipsum dolor
sit amet, consectetur adipiscing elit.</p>

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.

So what is different from the first line and the second line? The first line is without padding so the white background only fills to the end of the text instead the width of the box. The second line, however, spreads across the entire width of the box and it is a padding of 10px on all sides.

Padding works in very similar ways as the margin property except the margins are always invisible and the padding is based on the background of the element you are adding padding to.

Properties

Like margins, there are five possible properties we can use. They are the following:

1. padding-bottom
2. padding-left
3. padding-top
4. padding-right
5. padding

The first four properties define each side for padding. For example, if you wanted to adjust the bottom and right padding for a certain element you could use the following:

1
2
3
4
5
6
7

p.element {
     padding-bottom:3px;
     padding-top:7px;
}

This will change the bottom padding of the element by 3px and the top padding of the element by 7px. Example:

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Remember that padding is basically an extension of the background of an element and you also need to take into account any other elements (whether above, below, left or right) that might get in the way of this padding. In theory, you could make an entire HTML and CSS website using only margins, borders, padding, and content.

Values

1. em, px, pt – numeric values e.g. 1em, 15px, 2pt
2. percent % – percent of the containing element e.g. 10% of 500px is 50px.

1
2
3
4
5
6
7
8
9

span.padding {
     padding-top:2em;
     padding-bottom:10px;
     padding-right:16%;
}

All of the above are valid ways to define padding of our span element and class of padding.

Padding – All Inclusive

The all-inclusive padding property works the same way as the all-inclusive margin property. This singular padding property will define padding how ever we need it to using one property instead of writing out each side.

1

padding:15px 30px 45px 60px;

• top padding – 15px
• right padding – 30px
• bottom padding – 45px
• left padding – 60px

This example has four values for the padding property. The values start with padding-top and then go clockwise to padding-left. So if you think of clock and a new day, which always starts at 12 or the top of the clock, and then rotate clockwise the next 90° angle is at the right, then the 180° is at the bottom, and then the 270° is at the left. So it’s like looking at the clock at every 90° angle you get top, right, bottom, left.

1

padding:15px 30px 45px;

• top padding is 15px
• right and left padding is 30px
• bottom padding is 45px

This might come as a surprise to us because you would think they would group the [top and right] and [bottom and left] segments separately, however; we can see in this example that the padding-top is 15px and the padding-bottom is 45px. The left and right padding is grouped together because they just belong together. If someone asks, “when I say a word you think of something that is opposite to that” and they ask, “up” you’ll probably say “down” off the bat.

1

padding:15px 30px;

• top and bottom padding 15px
• right and left padding 30px

This might be more clear since there are only two values here. Naturally, we’d think [top and bottom] and [right and left] so the top and bottom padding will have a value of 15px whereas the right and left padding will have a value of 30px.

1

padding:15px;

• top, right, bottom, and left padding is 15px

One single value for the padding property will set all padding to that value, in our case 15px.