Box
box-sizing
box-sizing decides whether width and height include padding and border. With border-box, the box is exactly the width and height you set.
Syntax
content-box | border-boxPreview
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box {
width: 200px;
height: 120px;
padding: 20px;
border: 10px solid #88d1c7;
box-sizing: border-box;
}Controls
box-sizingborder-box
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
Writing the value
content-box: width and height cover only the content. Padding and border are added outside, so the box ends up larger than the size you set. This is the initial value.border-box: width and height reach the outer edge of the border. Adding padding or border makes the content area smaller instead.
The preview on this page uses width: 200px, height: 120px, 20px of padding and a 10px border. With content-box, the box is 200 + 20 × 2 + 10 × 2 = 260px wide.
A common setup
Because it makes sizes easier to reason about, many sites switch every element to border-box with *, *::before, *::after { box-sizing: border-box; }.