margin vs padding

Differences

1. margin is the space around the element.

   ┌──────────────────────┐               ┌──────────────────────┐
   |                      |               |                      |
   |                      |               |                      |
   |                      |◀︎── margin ───▶︎|                      |
   |                      |               |                      |
   |                      |               |                      |
   └──────────────────────┘               └──────────────────────┘

   Whereas padding is the space between an element and the content inside it. Both margin and padding do not include the border of element.

   ┌─────────────▲─────────────┐
   |             | Padding     |
   |             |             |
   |       ┌─────▼─────┐       |
   |       |           |       |
   |◀︎─────▶︎|           |◀︎─────▶︎|
   |       |           |       |
   |       |           |       |
   |       └─────▲─────┘       |
   |             |             |
   |             |             |
   └─────────────▼─────────────┘

2. The top and bottom margins are collapsible.
   Let's consider an example where we have two elements, A and B. The A element has 30px margin at the bottom, and B 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.
3. We can set margin: auto, but it is not possible for padding. We often use margin: auto to center an element.
4. margin can be any float number, but padding cannot be a negative.

   .div {
       margin: -10px;
   
       /* Not possible */
       padding: -15px;
   }

See also

• border-box vs content-box