Padding vs. Margin

Understanding padding and margins is an important concept for most CSS beginners. Mixing them up leads to incorrect usage which can trigger browser bugs and inconsistencies.

What Is Padding and Margin?

Padding is the inner space of an element which can be styled with a background while margin is the outer transparent space of an element. And in between is the elements border.

CSS Properties

• padding-top: 0px;
• padding-right: 0px;
• padding-bottom: 0px;
• padding-left: 0px;

• margin-top: 0px;
• margin-right: 0px;
• margin-bottom: 0px;
• margin-left: 0px;

CSS Shorthand Properties

• padding: top right bottom left;
• margin: top right bottom left;