Search pages
Search all CSS Showcase pages by name
The Box Model
Everything in CSS is a box — master how they work and you'll master layouts
Box Model Fundamentals
The CSS box model describes how every element is rendered as a rectangular box, consisting of content, padding, border, and margin layers.
The actual content of your element lives here
Box Sizing Models
The box-sizing property changes how the total width and height of elements are calculated. This can make layouts much more predictable!
content-box (default)
Width: 300px + padding + border
border-box
Width: 300px total
Interactive Box Model Playground
Experiment with different values to see how they affect the box model in real-time.
Adjust Properties
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid;
margin: 20px;
box-sizing: content-box;
}Advanced Box Model Techniques
Take your box model skills to the next level with these advanced techniques and edge cases.
Gap = 30px (not 50px)
Box Model Best Practices
Always Use Border-Box
Set box-sizing: border-box globally to make width calculations predictable and intuitive.
Margin for Spacing Between
Use margin for space between elements, padding for space inside elements.
Consistent Spacing Scale
Define spacing variables (8px, 16px, 24px…) for consistent rhythm throughout your design.
Continue Your Journey
Now that you understand how boxes work, explore how to arrange them!