Spacing & Sizing
Master the CSS Box Model in Tailwind. Adjust margins, paddings, and explicit sizing to see how elements physically take up space.
Padding & Margin
px
px
px
px
Sizing (Width & Height)
Box Model Visualizer
Margin Space (Parent)
Content Box
Padding surrounds this box.
Margin pushes away from the parent.
Padding surrounds this box.
Margin pushes away from the parent.
class="p-4 m-4 w-auto h-auto"iThe Box Model
Every element in web design is a rectangle. Understanding how to space these rectangles is the key to creating clean layouts.
✨ Padding vs Margin:
• Padding (`p-*`) is the space insidethe element's border. It pushes the content inward. Background colors apply to the padded area.
• Margin (`m-*`) is the space outsidethe element's border. It pushes neighboring elements away.
• Padding (`p-*`) is the space insidethe element's border. It pushes the content inward. Background colors apply to the padded area.
• Margin (`m-*`) is the space outsidethe element's border. It pushes neighboring elements away.
📏 The 4px Scale:Tailwind's default spacing scale is based on `0.25rem` (4px). This means `p-4` equals `16px` of padding, and `p-8` equals `32px`. Keeping to this scale ensures your design looks rhythmic and mathematically sound.