The Box Model

Explore padding, margin, and borders visually

Every element is a box. Drag the sliders to see how padding, border, and margin affect spacing.

Padding4

Margin4

Border2

Margin Border Padding Content

Content

padding 16pxborder 2pxmargin 16px

Tailwind CSS

<div class="p-4 m-4 border-2">
  Content
</div>

1 / 23