CSS Box Model

📢 This article was translated by gemini-2.5-flash

Display Modes

Display modes define how elements behave on a page. When laying out a web page, you pick the right display mode for your elements to position content effectively.

Block-level Elements (e.g., div)
- Occupies its own line
- Default width is 100% of its parent
- Height and width properties apply
Inline Elements (e.g., span)
- Can display multiple on a single line
- Height and width properties do not apply
- Dimensions are determined by content
Inline-block Elements (e.g., img)
- Can display multiple on a single line
- Height and width properties apply
- Dimensions can also be determined by content

You can change the display mode using the CSS display property. Values include:

Effect	Block	Inline	Inline-block
Property Value	block	inline	inline-block

Box Model

Purpose: Laying out web pages, positioning boxes and their content.

Box Model components:

Content Area: width & height
Padding: (space between content and box edge)
Border
Margin: (space outside the box)

Border

Property value: border-width border-style border-color. Order doesn’t matter.

Common border styles:

Style	Solid	Dashed	Dotted
Property Value	solid	dashed	dotted

1
2
3
div {
    border: 1px solid aqua;
}

Of course, you can also set individual border sides. The property values are the same.

1
2
3
4
5
6
div {
    border-top: 1px solid red;
    border-left: 1px dashed red;
    border-bottom: 1px dotted red;
    border-right: 1px solid blue;
}

Padding

Sets the distance between the content and the box’s edge.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
/* Same padding for all four sides */
div {
    padding: 10px;
}

/* Set individual sides */
div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-left: 10px;
}

Padding also supports multiple values, allowing you to control all four padding sides with one property.

Number of Values	Example	Meaning
One	`padding: 10px;`	All four sides are 10px
Four	`padding: 10px 20px 30px 40px;`	Top Right Bottom Left (clockwise)
Three	`padding: 10px 30px 20px;`	Top Left/Right Bottom
Two	`padding: 10px 20px;`	Top/Bottom Left/Right

Box Sizing Model

By default, box size = content size + padding size + border size. This means when you add padding and border, the box will get larger.

1
2
3
4
5
6
div {
    height: 200px;
    width: 200px;
    /* This box's size will become 240x240 */
    padding: 20px;
}

If you want the box to remain 200x200, you’d manually calculate and adjust the height and width values to 160px.

However, by adding box-sizing: border-box, the box’s size will consistently adhere to its height and width values.

1
2
3
4
5
6
7
div {
    height: 200px;
    width: 200px;
    /* This box's size will be 200x200 */
    padding: 20px;
    box-sizing: border-box;
}

Margin

Purpose: Creates space between two boxes. Property values are similar to padding.

Margin does not increase the box’s size.

Setting margin-left and margin-right to auto will horizontally center the box.

1
2
3
4
5
6
div {
    height: 200px;
    width: 800px;
    /* This box will be horizontally centered */
    margin: 0 auto;
}

Collapsing Margins

For vertically stacked sibling elements, top and bottom margins collapse, taking the value of the larger margin.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<style>
    .box1 {
        width: 200px;
        height: 100px;
        background-color: aqua;
        margin-bottom: 10px;
    }
    /* The two boxes will have a 20px gap */
    .box2 {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        margin-top: 20px;
    }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

Margin Collapse Issue

When a child element inside a parent has a margin-top, it can cause margin collapse, pushing the parent element down along with it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<style>
    .father{
        width: 300px;
        height: 300px;
        background-color: pink;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: aqua;
        /* Both boxes will collapse down by 50px together */
        margin-top: 50px;
    }
</style>

<div class="father">
    <div class="son"></div>
</div>

Solutions:

Remove child’s margin; use parent’s padding instead.
Set overflow: hidden on the parent.
Add border-top to the parent.

Element Overflow

When content exceeds the box’s dimensions, it overflows. The overflow property controls how this overflowing content is displayed.

Property Value	Effect
hidden	Content outside the box is clipped/hidden
scroll	Scrollbars always appear, even if content doesn’t overflow
auto	Scrollbars appear only when content overflows

Inline Element Vertical Alignment

Adding margin and padding to inline elements (like span) won’t change their vertical position. You can adjust this using line-height instead.

1
2
3
4
5
6
span {
    margin: 50px;
    padding: 20px;
    
    line-height: 100px;
}

Rounded Corners

Use the border-radius property to give elements rounded borders. The value is the corner’s radius, which can be number+px or a percentage. Multiple values work similarly to padding.

Number of Values	Meaning
One	All four corners get the same radius
Four	Top-Left Top-Right Bottom-Right Bottom-Left (clockwise)
Three	Top-Left Top-Right/Bottom-Left Bottom-Right
Two	Top-Left/Bottom-Right Top-Right/Bottom-Left

Perfect Circles

For a square box, set border-radius to half its width/height, or 50%.

1
2
3
4
5
6
7
8
div {
    width: 100px;
    height: 100px;
    background-color: aqua;
    
    border-radius: 50%;
    /* Or border-radius: 50px */
}

Capsule Shape

For a rectangular box, set border-radius to half its height.

1
2
3
4
5
6
7
div {
    width: 100px;
    height: 50px;
    background-color: aqua;
    
    border-radius: 25px;
}

Shadow Effects

Use box-shadow with the following property values: x-offset y-offset blur-radius spread-radius color inset/outset.

x and y offsets are required. It defaults to an outset shadow; use inset for an inner shadow.