How does margin differ from padding?

Difficulty: 2/10

box model, layout, spacing

Difference Between Margin and Padding in the CSS Box Model

Margin and padding both create space around elements, but they serve different purposes. Padding adds space inside the element, between the content and the border, while margin adds space outside the element, separating it from other elements.

Example: Margin vs Padding

Key Differences

1
Padding increases space between content and border inside the element.
2
Margin increases space between the element and other elements outside.
3
Padding affects the total size of the element (unless using box-sizing: border-box).
4
Margin does not affect the element's internal size; it only creates separation outside.

Scenario Questions

0-2 years experience

Follow-up Questions