midCSS
Difference between padding and margin?
Updated Apr 28, 2026
Short answer
Padding is space inside the element's border. Margin is space outside the element's border.
Deep explanation
Padding pushes content inward and inherits the element's background color. Margin pushes other elements away and is completely transparent. Margins also exhibit 'margin collapse' where adjacent vertical margins combine into the larger of the two.
Real-world example
Using padding to make a button thicker, and margin to push the button away from the paragraph above it.
Common mistakes
- Using margin to space out content inside a parent container that has a background color, resulting in empty white gaps where the background fails to reach.
Follow-up questions
- What is margin collapse?