- [Voiceover] After our overview of the box model,
I want to take a moment to familiarize you
with the individual properties of the box model,
and I want to start with margins and padding.
Padding is the space inside of elements
that hold the contents of an element
away from its edge.
You can specify padding in several ways.
First, you can define padding individually
for each side of an element.
Now keep in mind, however, that setting padding
in only one direction is not the same
as setting padding to zero in other directions.
Any existing padding on other sides
is still going to apply.
You can also use shorthand notation
when defining padding.
There are four variations on padding shorthand.
First, you can define four separate values,
separated by white spaces.
Now, these values are going to apply, in order,
to the top, right, bottom,
and left sides, respectively.
Now, if you use three values, the first value will be
applied to the top, the second value for the left
and right sides, and the last value will be
applied to the bottom.
If you only use two values, the first value applies
to the top and the bottom,
while the second value will apply to both
the left and right sides.
Finally, if you simply use a single value,
that value is going to be used for all sides equally.
The rules for padding are actually fairly straightforward,
and most elements start with no padding at all.
However, when width values are set on an element as well,
there are a couple of things to keep an eye on.
Now, by default, most elements that are considered
block-level elements, like paragraphs, will go ahead
and expand to fit the width of their parents.
If you don't define the width for those elements,
padding will be added to the inside of the element,
which causes the content area to shrink,
and sometimes results in the element
actually getting taller.
If, on the other hand, you specify a width of 100%,
padding will then result in the element
actually becoming wider than its parent element,
as the padding is added to the outside
of the element's width.
You can change this behavior by using
the box-sizing property, but when defining
element widths, it's crucial that you understand
how the element's padding will factor into the equation.
Most designers use padding to keep the contents
of a box away from its edge.
This can be used to create visual boxes,
like pull quotes, out of a single element,
without using graphics or background images.
Padding can also be used to move the contents
of an element away from a background image
to give the appearance of custom bullets,
or as a way to add decorative touches to elements.
Margins represent the space between the elements,
and are applied outside of an element's edge.
While it's not factored into the total width of an element,
it does affect the amount of space that an element
takes up on the page and is critical to achieving
proper spacing between elements.
Unlike padding, many elements do have
a default margin that you need to account for
when structuring layouts.
Later on, we're going to discuss what a CSS reset is,
how they affect margins, and the rationale for using them.
Margins also use the same syntax as padding,
so you can either specify margins
for each side individually,
or use the shorthand notation.
For the most part, margins are pretty straightforward,
but there is one aspect of margins that tends
to trip up even the most experienced of designers.
Unlike horizontal margins, vertical margins collapse.
That means that, if you have two elements,
stacked one on top of another,
only one of the elements' margins are applied.
Take this example.
If you have heading one with a bottom margin of 16 pixels,
and a paragraph with a top margin of 16 pixels,
there will only be 16 pixels' worth of space
between them, not 32 pixels'.
This prevents paragraphs and headings
from having double spaces between the two of them.
If the values are not the same, the higher of the two values
is going to be used.
There's a lot more to margin collapse,
so as you learn CSS, pay particular attention
to when vertical margins collapse,
why they collapse, and how you can trigger
or prevent it, based on your needs.
As you can imagine, mastering how margins and padding work
is a very important part of learning CSS.
They're both incredibly important to properly
positioning content and establishing relationships
between visual elements.
Mastering these properties early on
can save you from some frustrating
moments down the road.