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 
<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>
padding Padding is space between content and border.
border A border is painted around the padding edge.