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;
    }

More

Hit the Subscribe button for the latest news on my tools. No spam. Ever!
© 2020 Nguyen Huu Phuoc. All rights reserved