Box Model in CSS is the foundation of layout. Every HTML element that appears on a page is treated as a rectangular box by the browser. That box has content, padding, border, and margin. Understanding how these parts work is necessary before learning advanced layout systems like flexbox and grid because those systems still arrange boxes.
Many beginner layout problems come from misunderstanding the box model. A card becomes wider than expected. Two sections have strange spacing between them. A button feels too small even though the font size is correct. These issues usually involve width, padding, border, margin, or box sizing.
Parts of the CSS Box Model
The box model has four main layers. The content area contains the text, image, or child elements. Padding is space inside the element around the content. Border surrounds the padding and content. Margin is space outside the border that separates the element from other elements.
| Part | Meaning |
|---|---|
| Content | The actual text, image, or child content |
| Padding | Space between content and border |
| Border | Line around padding and content |
| Margin | Space outside the element |
.card {
width: 300px;
padding: 24px;
border: 2px solid #111160;
margin: 20px;
}This card has a content width of 300px, padding on all sides, a border around it, and margin outside it. Depending on the box sizing mode, the final visible width may be larger than 300px.
Visualizing the Box Model
A practical way to visualize the box model is to imagine a framed picture. The picture itself is the content. The empty space between the picture and the frame is padding. The frame is the border. The wall space around the frame is margin. CSS uses the same basic idea for elements on a page.
This mental model helps when deciding which property to use. If you want more space inside a button, use padding. If you want more space between two cards, use margin or layout gap. If you want a visible edge, use border.
Content Area
The content area is where the actual content lives. For a paragraph, it contains text. For an image element, it contains the image. For a card, it may contain headings, paragraphs, buttons, and other child elements.
When you set width and height, you are often setting the content box size by default. This is why padding and border can make the final element larger than expected unless box-sizing is changed.
Padding
Padding creates space inside the element. It pushes the content away from the border. Padding is part of the element background area, so a background color usually appears behind the padding.
.button {
padding: 12px 20px;
background-color: #111160;
color: white;
}The button feels larger not because the text is bigger, but because padding creates internal breathing room around the text. Good padding makes components easier to read and easier to click.
Padding Shorthand
Padding can be written for all sides at once. One value applies to all sides. Two values apply to vertical and horizontal sides. Three values apply to top, horizontal, and bottom. Four values apply to top, right, bottom, and left.
.box {
padding: 20px;
padding: 20px 32px;
padding: 16px 24px 32px;
padding: 10px 20px 30px 40px;
}The four-value order follows clockwise direction: top, right, bottom, left. The same pattern is used by margin and some other CSS shorthand properties.
Border
The border sits between padding and margin. It can have width, style, and color. A border can be visible, transparent, rounded, or removed.
.notice {
border: 2px solid #2c8ffa;
border-radius: 8px;
}Borders are useful for separating content, defining inputs, highlighting cards, and creating component boundaries. Even transparent borders can be useful when preventing hover layout shifts.
Margin
Margin creates space outside the element. It separates the element from surrounding elements. Margins are transparent and do not show the element background.
h2 {
margin-top: 2rem;
margin-bottom: 1rem;
}Margins are commonly used for vertical rhythm in articles. Headings often need space above and below so the structure is easy to scan.
Margin Shorthand
Margin shorthand follows the same value order as padding. This makes it easy to create external spacing patterns around elements.
.card {
margin: 0 0 24px;
}
.wrapper {
margin: 0 auto;
}The margin: 0 auto pattern is commonly used to center a block element horizontally when it has a set width or max width. The left and right margins become automatic and share the available space.
Default Box Sizing
By default, most elements use box-sizing: content-box. In this mode, width and height apply only to the content area. Padding and border are added outside that size.
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
}With content-box sizing, the total visible width becomes 300px content + 40px horizontal padding + 10px horizontal border, which equals 350px. This surprises many beginners.
Border Box Sizing
The value border-box changes the sizing model. Width and height include content, padding, and border. This makes layout calculations more predictable.
* {
box-sizing: border-box;
}This rule is commonly used in modern CSS resets. If a box has width: 300px, padding and border are included inside that 300px instead of being added outside it.
| box-sizing | Width Includes |
|---|---|
| content-box | Content only |
| border-box | Content, padding, and border |
Margin Collapse
Vertical margins between block elements can collapse. This means two vertical margins may combine instead of adding together. Margin collapse is one of the most confusing parts of the box model for beginners.
h2 {
margin-bottom: 30px;
}
p {
margin-top: 20px;
}You might expect 50px of space between the heading and paragraph, but vertical margins can collapse so the larger margin wins. In this case, the space may become 30px instead of 50px. Padding and gap do not collapse in the same way.
Inline and Block Boxes
The box model behaves differently depending on the display type. Block elements usually start on a new line and can accept width, height, margin, padding, and border in predictable ways. Inline elements flow inside text and do not respond to width and height the same way.
span {
padding: 4px 8px;
border: 1px solid #dddddd;
}Padding and border can appear on inline elements, but vertical spacing may not affect surrounding layout the way a beginner expects. For button-like inline elements, inline-block or flex layout is often more predictable.
Gap vs Margin
Modern layout systems often use gap instead of margins between flex or grid items. Gap belongs to the container and creates consistent spacing between children. Margin belongs to individual items and can be harder to manage when items wrap or change order.
.grid {
display: grid;
gap: 24px;
}Using gap does not remove the need to understand margin, but it often produces cleaner layout spacing for groups of items. For article typography, margins are still common. For component grids and flex rows, gap is often cleaner.
Width, Max Width, and Min Width
Width-related properties also connect directly to the box model. The width property sets the preferred width, max-width limits how wide an element can become, and min-width controls how narrow it can become. These properties are often used together for responsive layouts.
.container {
width: min(100%, 1100px);
margin-inline: auto;
padding-inline: 24px;
}This pattern creates a container that fills small screens but stops growing after 1100px. Padding keeps content away from the viewport edge. The margin centers the container when there is extra horizontal space.
Height and Min Height
Height can be more dangerous than width because content length changes. If you set a fixed height and the content becomes taller, it may overflow. For many layouts, min-height is safer because it allows the element to grow when needed.
.hero {
min-height: 60vh;
padding: 4rem 1.5rem;
}This hero section has a minimum height, but it can still expand if the content needs more space. That is usually better than forcing a strict fixed height.
Overflow and the Box Model
When content is larger than its box, overflow rules decide what happens. The content may spill out, become hidden, or create scrollbars. Overflow problems often reveal a box model issue such as fixed height, long text, missing wrapping, or too much internal spacing.
Using Browser Developer Tools
Browser developer tools show the box model visually. When you inspect an element, the layout panel usually displays content, padding, border, and margin with different colors. This is one of the fastest ways to debug spacing problems.
If an element is wider than expected, inspect it and check the computed width, padding, border, and box sizing. If spacing between elements looks strange, check margin values and whether margins are collapsing.
Box Model and Layout
Flexbox and grid do not replace the box model. They arrange boxes. Each flex item or grid item still has content, padding, border, and margin. Understanding the box model makes flex and grid easier because you can separate container layout behavior from individual item sizing.
- Use padding for internal spacing.
- Use margin for external spacing.
- Use border to visually define edges.
- Use box-sizing border-box for predictable layout.
- Use developer tools to inspect computed box values.
- Avoid guessing when spacing looks wrong.
Common Box Model Mistakes
- Expecting width to include padding in content-box mode.
- Using margin when padding is the correct internal spacing.
- Using padding when margin is the correct external spacing.
- Forgetting that vertical margins can collapse.
- Adding borders on hover and causing layout shift.
- Not checking the box model in developer tools.
Box Model in CSS FAQ
What are the four parts of the CSS box model?
The four parts are content, padding, border, and margin.
What is the difference between padding and margin?
Padding is inside the element between content and border. Margin is outside the element and separates it from other elements.
Why is my box wider than the width I set?
In content-box mode, padding and border are added outside the declared width. Use box-sizing: border-box for more predictable sizing.
Do margins collapse horizontally?
Normal margin collapse happens vertically between block elements, not horizontally.
Continue learning CSS in order
Follow the topic sequence with the previous and next lesson.