Preview
Video Player
00:00
00:00
Padding
7:14Padding 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.
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