Well done!

You have completed CSS Layout!

Preview

Padding

Padding creates space inside a CSS box. It’s the space between the content and the border. In this video, we’ll demonstrate the impact padding has on a CSS layout.

Project files

Download project files

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

In this video, we'll demonstrate the impact padding has on a CSS layout. 0:00

Let's start by looking at the project files we'll 0:07

be working with throughout this course. 0:09

To get started, simply launch a new workspace and follow along. 0:13

You can also download the project files for 0:17

each lesson in the download section of each page. 0:20

We'll be applying a variety of styles to a sample blog post written by 0:25

Developer Diane about learning CSS. 0:30

A link is included to an external style sheet in the head, 0:34

but the CSS file is empty. 0:39

We'll add to it as we go. 0:42

If I load this blog post in the browser, my page isn't totally unstyled. 0:45

It's being affected by the user agent style sheet. 0:51

Which is what we call the default styles applied by the browser. 0:56

In Google Chrome, I'm going to right- click on the logo, which is the text 1:01

in the header that reads Developer Diane's blog, and choose Inspect. 1:07

As we work through these exercises, you'll want to get used to working with 1:13

the inspector open, as I can select different elements and view 1:17

not only the CSS that's being applied to each element, 1:22

but also a diagram of the box model. 1:26

Developer Diane's logo is in a div with an ID of logo. 1:31

And divs by default don't have any adjustments to the box model. 1:36

Neither padding, nor border, nor margin is impacting this element. 1:40

So why isn't the logo touching the upper edge of the screen? 1:49

We'll have to dig a bit more for that. 1:53

The logo div has a parent element called header. 1:56

But the box model is empty so far there as well. 2:00

But the header is inside the body element. 2:04

And it looks like the body has eight pixels of margin on all four sides. 2:08

That's helpful information as we start styling. Let's start styling 2:15

the header element by setting its background to a shade of blue. 2:21

And the text to ghostwhite. 2:29

Based on what we've learned so far about padding, you might not 2:35

be surprised to discover that the white text is touching the edge 2:39

of the blue header box. 2:42

We can use padding to provide more comfortable spacing. 2:45

We can define values for padding as any length or percentage unit, and 2:50

there are two different ways we can set the values for padding. 2:55

The first way is by setting each property individually. 3:00

Let's inspect the header element in the browser. 3:13

The box model diagram is updated to reflect 3:18

the padding added to the header element. 3:21

And there is space in between the content and the border, 3:25

which is exactly what padding accomplishes. 3:29

An interesting use of the Inspector is a sort of playground for your CSS. 3:33

You can type in different values for padding and preview the effects. 3:40

The changes I've made here won't actually affect my CSS document. 3:47

When I hit refresh, the changes disappear. 3:52

But this can be a great way to visualize changes to 3:55

a CSS box before you actually apply them in your style sheet. 3:59

I've included a writing on this technique in the Teacher's Notes. 4:04

To avoid having to write a separate declaration for each side, 4:09

we can use the shorthand property for padding, 4:14

which lets us set the padding on all four sides in one declaration. 4:17

If we only define one value, the same padding is applied on all four sides. 4:23

We can define four separate values all at once using the shorthand. 4:32

The first values applied to the top, the second to the right, 4:38

the third to the bottom side and the fourth to the left side. 4:43

It's important to remember this shorthand order of values, because 4:53

the same order is used on other shorthand properties in CSS, 4:58

which we'll cover before long. Think of a clock and remember 5:03

the order of values is top, right, bottom, left. 5:07

If we define only three values, the first value is applied to the top. 5:14

The second is applied to the right and the left sides. 5:21

And the third value applies to the bottom side only. 5:26

And if we define only two values, 5:31

the first value is applied to the top and bottom sides of the element. 5:34

And the second value is applied to the right and left sides. 5:40

Now, the top and bottom sides have 10 pixels of padding, 5:45

while the right and left sides have 15 pixels. 5:50

This matches the declarations we wrote earlier, but 5:54

using one statement rather than four. 5:58

Finally, it's worth noting that we could also declare a fluid 6:02

padding value using percentages. 6:07

When defining a top or bottom padding using a percentage value, 6:10

it's important to understand that the percentage is relative to 6:15

the total width of the container, not the height. This will apply 6:19

10% of top and bottom padding based on the header's width and 6:26

15% to the left and right sides, also based on the width. 6:32

To demonstrate, notice that as I adjust the height of my 6:39

browser viewport, the padding doesn't change. 6:43

But as I decrease the width of the viewport, 6:48

the padding on all four sides adjusts accordingly. 6:52

Keep this in mind, if your padding is measured in percentages. 6:57

I'm going to undo that and restore the pixel values before we move on 7:03

to our next lesson, where we'll examine the border property. 7:08

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace

CSS Layout

Well done!

You have completed CSS Layout!

Padding

Project files

Further reading

Related Discussions

Related Discussions