margin vs padding
Differences
margin
is the space around the element.┌──────────────────────┐ ┌──────────────────────┐
| | | |
| | | |
| |◀︎── margin ───▶︎| |
| | | |
| | | |
└──────────────────────┘ └──────────────────────┘Whereas
padding
is the space between an element and the content inside it. Bothmargin
andpadding
do not include the border of element.┌─────────────▲─────────────┐
| | Padding |
| | |
| ┌─────▼─────┐ |
| | | |
|◀︎─────▶︎| |◀︎─────▶︎|
| | | |
| | | |
| └─────▲─────┘ |
| | |
| | |
└─────────────▼─────────────┘The top and bottom margins are collapsible.
Let's consider an example where we have two elements,
A
andB
. TheA
element has 30px margin at the bottom, andB
has 20px margin at the top.In final, the margin between two elements are the maximum numbers of two margin values, i.e 30px, not the total sum of them.
┌───────────────────────────┐
| |
| A |
| |
└───────┬───────────────────┘
|
| ▲
margin | |
bottom | |
| | margin
| | top
| |
┌───────▼───────┴───────────┐
| |
| B |
| |
└───────────────────────────┘This does not happen with the left, right margins and any
padding
values.We can set
margin: auto
, but it is not possible forpadding
. We often usemargin: auto
to center an element.margin
can be any float number, butpadding
cannot be a negative..div {
margin: -10px;
/* Not possible */
padding: -15px;
}