CSS Box Model

CSS

Every HTML element is a box. The CSS Box Model describes the space around elements:

Content — The actual text/image
Padding — Space between content and border
Border — The edge of the box
Margin — Space outside the border

Understanding the box model is essential for layout control.

Example — CSS

.card {
    /* Content width */
    width: 300px;

    /* Padding: space inside */
    padding: 20px;

    /* Border */
    border: 2px solid #e2e8f0;
    border-radius: 12px;

    /* Margin: space outside */
    margin: 16px auto;

    /* Box sizing (important!) */
    box-sizing: border-box;
}

Result

This is a card
padding: 20px, border: 2px, border-radius: 12px

Previous CSS Selectors

Completed! Back to All Tutorials

CSS Box Model

Continue Learning