Box Model and Spacing

Padding and Border Box

A compact label expands into a readable badge as padding, border, background, and width are applied.

Program

Every element paints a box. Padding creates inner space, borders frame the box, and background fills the padded area.

Background fills through padding; margin stays outside the painted border.CSS box modelPinned example: content 120 x 40, padding 16px, border 4px, margin 24pxThe painted box grows one layer at a time.Background fills through padding; margin stays outside the painted border.content 120 x 401. contentpadding 16px2. inner spaceborder 4px3. framemargin 24px4. outside gap
Figure: CSS box model layers. Model source: books/css/02box_model_spacing/padding_border_box/diagrams/box_model.semantic.json.
padding_border_box.html
Visuals: captured from real browser rendering
<style>
.badge { display: inline-block; }
.badge { padding: 14px 20px; }
.badge { border: 3px solid #0f766e; }
.badge { background: #ccfbf1; }
</style>

<div class="badge">Ready for review</div>

  1. Make the badge respect width and padding.

    The text becomes an inline-block box.
    Inline-block keeps the label on one line while allowing box sizing.

  2. Add space inside the badge.

    The badge grows around the text.
    Padding expands the painted box without changing the text.

  3. Frame the padded area with a border.

    A teal border appears around the badge.
    The border wraps content plus padding.

  4. Fill the box background.

    The badge fills with a mint background.
    The background paints behind content and padding.
padding Padding is space between content and border.
border A border is painted around the padding edge.