There are plenty of ways you can provide spacing between your elements and content. Two of them are padding and margin.
Padding
Padding as mentioned before in the Box Model is the spacing between the actual content and the border.
There are different ways we could write the padding property values.
div {
padding: 10px; /* All sides */
padding: 10px 5%; /* Vertical Horizontal */
padding: 10px 20px 30em; /* Top Horizontal Bottom */
padding: 10px 20px 30rem 40px; /* Top Right Bottom Left */
padding-left: 10px; /* Left */
padding-right: 10px; /* Right */
padding-top: 10px; /* Top */
padding-bottom: 10px; /* Bottom */
}
Padding also has special values that can be used.
-
%
: percentage relative to the width of the container -
initial
: defaults to 0 -
inherit
: padding value of the containing element -
unset
: removes the value
Gotcha
Not all display types treat padding the same.
Margin
Padding as mentioned before in the Box Model is the spacing between the element and another element.
There are different ways we could write the padding property values.
div {
margin: 10px; /* All sides */
margin: 10px 5%; /* Vertical Horizontal */
margin: 10px 20px 30em; /* Top Horizontal Bottom */
margin: 10px 20px 30rem 40px; /* Top Right Bottom Left */
margin-left: 10px; /* Left */
margin-right: 10px; /* Right */
margin-top: 10px; /* Top */
margin-bottom: 10px; /* Bottom */
}
Inline
Similar to padding, margin doesn't behave as expected when the element is inline
and its container is block
. Inline elements don't show vertical margins even though its assigned.
Collapsing Margin
If elements aligned vertically have margins, the margin that value that will be used will be the bigger of the two instead of adding both values. This only works if you're
Gotcha!
Margins don't collapse if the containing block is display flex
or grid
because these two display types put its child elements in individual boxes.
Top comments (2)
padding: 10px 5%; -- Shouldn't be Horizontal Vertical ?
It's 10px (top | bottom) and 5% (left | right) so Vertical Horizontal.