HTML & CSS Interview Question #68

What is the difference between margin and padding?

CSS Fundamentals, Selectors, Cascade, Specificity, Box Model, Units & Typography Mid-Level Intermediate

Quick Interview Answer

Margin creates space outside an element's border and separates the element from surrounding content. Padding creates space inside the border between the content and the border.

Detailed Explanation

Margin creates space outside an element's border and separates the element from surrounding content. Padding creates space inside the border between the content and the border.

Backgrounds normally extend through the padding area but not through the margin. Padding also contributes to the element's box dimensions according to the active box-sizing model.

Code Example

.card {
    margin: 24px;       /* outside */
    padding: 16px;      /* inside */
    border: 1px solid #ddd;
    background: white;
}