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.

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.