The width property is used to set the width of the content box of an element.
Every element on a web page is rectangular, and each element has a rectangular box model, which describes each of the rectangular boxes (areas) generated for the element: the content box, the padding box, the border box, and the margin box. The content box exists for every element. The padding, border, and margin boxes, on the other hand, are optional, and their existence depends on whether you apply a padding, border, or margin to an element.
Any padding added to the element will increase the total computed width of the element, so you may not always end up with the expected width using just the width property if you also add padding to your element. An element with width: 300px and padding: 20px will render to a width of 340px. See the notes section below for details.
The width property has no effect on non-replaced inline elements, such as <span>s. The content width of a non-replaced inline element’s boxes is that of the rendered content within them. In order to set a width on an inline element, the element must be forced to block using the display CSS property. For example, setting display: inline-block or display: block on an inline element allows you to define a width on that element.
The width property can take either length values or percentage values, in addition to the auto and inherit values.
In CSS3, more values have been added to the width property that are still experimental at this time. See the values section below for details.
The width property is overridden by the min-width and max-width properties.
Trivia & Notes
In a lot of cases, you may want to set the width of an element to a certain value, and then add some padding to that element and expect it to preserve the width that you set on it using the width property. In the normal (default) case, this does not work because, as mentioned earlier, the width property is used to set the width of the content box of the element. Any padding added to the element will add to its final computed width.
In order to avoid that, and preserve the element’s width after adding any amount of padding to it, the box-sizing property can be used with a value of border-box.
When box-sizing: border-box is set on an element, the width specified using the width property will also include any padding added to it. This means that the width of the padding box specified using the padding property will be deducted from the width of the element, which in turn means that the content width of the element would be less than the value specified using width. For example:
.element {
box-sizing: border-box;
width: 300px;
padding: 20px;
}
The width of the content area of the element will be 300px – 40px = 260px. (The right and left padding areas are 20px each, so the horizontal padding sums up to 40px.)
The width specified using the width property when box-sizing: border-box is used is the width of the border box. You can read more about this in the box-sizing property entry and in * { Box-sizing: Border-box } FTW by Paul Irish.
Official Syntax
-
Syntax:
width: <length> | <percentage> | auto | inherit
- Initial: auto
- Applies To: all elements but non-replaced inline elements, table rows, and row groups
- Animatable: yes, as a length
Notes
The new syntax introduced in CSS3 is:
width: [<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | auto
The keywords border-box and content-box can be used in conjunction with length and percentage values in the same declaration.
The keywords available, min-content, max-content and fit-content are used on their own and each will generate a width based on certain calculations (see values section below).
Values
- <length>
-
Specifies the width of an element using a length unit. See the <length> property entry for a list of possible values.
If the keyword
border-boxis present, the length sets the size of the border box; ifcontent-boxis present, it sets the size of the content box; if neither is present, thebox-sizingproperty determines which size is set. - <percentage>
-
Specifies the width of an element as a percentage of the width of the element’s container. See the <percentage> property entry for a list of possible values.
If the keyword
border-boxis present, the percentage sets the size of the border box; ifcontent-boxis present, it sets the size of the content box; if neither is present, thebox-sizingproperty determines which size is set.Note that for absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element and not the width of the content box of that element.
- auto
- The browser will calculate and select a width for the element based on their normal flow.
- inherit
- The element inherits its width from its parent.
- available
-
Width is equal to the containing block width minus the current element’s margin, border, and padding.
WebKit implements a variation of this value, under the name
fill-availableas of December 2013. - max-content
-
The intrinsic preferred width. The
max-contentwidth is, roughly, the size the content would have if no “soft” line breaks were inserted, i.e., if, for example, each paragraph is one long line—the line is not broken and just continues as one line. - min-content
-
The intrinsic minimum width. The
min-contentwidth is, roughly, the narrowest the box can get by breaking all lines at all possible break points. In most cases its width will depend on the width of its widest inline element. - fit-content
-
Technically speaking,
fit-contentis the larger of:min-content- the smaller of the
max-contentandavailable
Obviously, an example will help understand it better. As the name suggests, the element would fit the content inside it, so, in one way or another, it is similar to
min-contentandmax-content, and as we saw in the technical definition, it is dependent on the two.The
fit-contentvalue comes in handy when you want to define the width of an element based on other elements inside it with unknown widths. A practical example is determining the width of a horizontal navigation bar based on the navigation items inside it. The list items are usually floated next to each other, but the list itself, being a block-level element, will expand to fit the width of its container, no matter the width of the list items inside it.Using
fit-content, you can have the navigation’s width adjust to the width of the items inside it, and then, usingmargin: auto, you can center the navigation inside its container (a header, for example). The following live demo shows the difference between the width of the navigation without usingfit-content, and with it. The navigation has a black background.
The following experimental keyword values have been introduced in CSS3.
The following image helps understand the min-content and max-content values.
More about min-content and max-content:
The min-content value is the narrowest a box can get by breaking all lines at all possible break points. In the above image, we saw how a text-only content can affect the container’s width with min-content. The same concept applies if you have an image inside an element. The element is an inline-element, and therefore a break point is also possible after it. So, if the element contained a piece of text, and an image, the image is more likely to be wider than any word inside the paragraph (unless you’re using some fancy and super long words, of course), so the image can be the content that specifies the width of the element with min-content.
Using max-content, the content inside the element will not break at any soft break points, and the text will be rendered as one long line, and the element will stretch to fit the longest line inside it.
Notes
Available, max-content, min-content and fit-content only have effect in the inline progression direction: they are equivalent to auto when set on the height of horizontal elements (horizontal languages like English, Arabic, Spanish, etc.) or on the width of vertical elements (vertically-written languages like Japanese and Chinese). So, these values will have no apparent effect on vertically-written content.
Negative width values are not allowed.
The keyword values (in contrast to length and percentage values) are not influenced by the box-sizing property, they always set the size of the content box.
Examples
width: 35%;
width: 400px;
width: auto;
width: inherit;
The total width of the following element will be 450px.
.element {
width: 400px;
padding: 20px 25px;
}
The total width of the following element will be 400px.
.element {
box-sizing: border-box;
width: 400px;
padding: 20px 25px;
}
Live Demo
View this demo on the Codrops PlaygroundBrowser Support
The width property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.
The new experimental values added in CSS3 are not yet supported in all browsers, and some of them have different equivalents supproted in some browsers. The browser support for the new values is shown in the following table:
Intrinsic & Extrinsic Sizing
Allows for the heights and widths to be specified in intrinsic values using the `max-content`, `min-content`, `fit-content` and `stretch` (formerly `fill`) properties.
W3C Working Draft
Supported from the following versions:
Desktop
- 94
- 66
- No
- 95
- 16
Mobile / Tablet
- 16
- 131
- No
- 131
- 132
