Box
width
width sets the width of an element. Besides fixed lengths, you can use % of the parent or keywords that size the element from its content.
Syntax
auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>)Preview
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box {
width: 160px;
}Controls
width160px
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
Writing the value
- A length such as
240px: uses that width. 50%: a share of the parent's width (more precisely, the width available for content).auto: decided by the surroundings. A normal block element stretches to the full width of its parent. This is the initial value.min-content: the width when every possible line break is taken. For English, that is the width of the longest word.max-content: the width when no line ever wraps.fit-content: fits the content without exceeding the parent's width. Useful for sizing buttons or headings to their text.
The box in this page's preview sits in a centered layout, so auto gives the same width as fit-content.
Are padding and border included?
By default, width sets only the content width, and padding and border are added outside it. With box-sizing: border-box, the width includes padding and border.