Width - Property CSS
This page is also about physical property(ies):
heightAnd the logical properties:
inline-sizewidth.block-sizeheight.Summary of characteristics of the width property
auto | min-content | max-content | fit-contentautoComputed value: during an animation, the width property gradually changes from one value to another.Syntax diagram of width.
width property.The links in the diagram provide more details about the values.
In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:
lengthis a numerical value followed by one of CSS dimension units.%is a percentage calculated relative to the width of the parent element.
Description of the width property.
The property width sets the width of the element.
This property is called "physical" because it affects the width of the element regardless of the writing mode (for example, Asian languages are written from top to bottom).
Method of calculating dimensions.
Warning! The box-sizing property changes the way an element's dimensions are calculated:
box-sizing:content-boxThe
width property sets the width of the element's content, excluding padding and border thickness.
box-sizing:border-boxThe property
width sets the width of the element, including padding and border thickness.
It is also necessary to take into account the min-width and max-width properties, which can impose constraints on the width of the element
and take precedence.
Language support.
To facilitate the management of non-Latin languages, two properties allow you to define the dimensions of an element relative to the writing mode used. These two properties are:
inline-size: size of the element in the line-writing direction. For Latin languages, this property defines the width.block-size: Dimension of the element in the block direction. For Latin-based languages, this property defines the height of the element.
⮜───── width ─────⮞⮜──── height ────⮞If you want more explanations on handling non-Latin languages, refer to the tutorial on writing modes.
Values for width.
The values described below apply both to the property width and to the corresponding logical property: inline-size or block-size.
- width: auto;
The browser determines the width of the element. In general, the width is equal to width of the parent minus the parent's padding, minus the element's margins. In the example below, a thin line separates the parent's padding from the element's margins.
width:auto; - width: 150px;
The width of the element is set to the specified dimension. It is a positive number or 0, followed by a unit of measurement (see CSS dimension units). Depending on the value specified, the element may overflow its parent.
width:150px;width:220px;If the value is expressed as a percentage, it is calculated relative to the width of the parent minus the parent's padding.
width:50%; - width: min-content; width: max-content; width: fit-content; width: fit-content(d); ⚠
With one of these three values, the width of the element is determined based on its content (intrinsic size):
min-content: content width after adding as many line breaks as possible. Refer to the valuemin-contentfor a more precise description.max-content: content width without line breaks, except those explicitly written in the source code (HTML). See the page onmax-contentfor a full description.- The
fit-contentvalue or the function of the same name should be accepted, but it still has some compatibility issues with the function. Withfit-content, the width of the element is determined based on its content, but without exceeding the available space or theddimension specified as a parameter of the function. Line breaks can be inserted if the length of the text exceeds this limit.
Refer to the description of the valuefit-contentor the functionfit-content()for a full description.
- width: initial; (
auto) width: inherit; width: revert; width: revertLayer; width: unset;These values are described in more detail on their respective page:
initial,inherit,revert,revert-layer,unset.
Animation of the width property.
The property width is among those most often animated for various visual effects.
Programmatic width manipulation.
The code examples below are given with the width property but will be easily transposed to the equivalent logical properties
inline-size and block-size.
Changing the value of width with JavaScript.
Two syntaxes are possible.
let el = document.getElementById('id');
el.style['width'] = '50%';
// or
let el = document.getElementById('id');
el.style.width = '50%';
Retrieving the value assigned to width with JavaScript.
The code below works if the property has been applied directly to the element itself via its style attribute, and not through a CSS selector.
The values assigned by the code above can also be retrieved in this way.
let el = document.getElementById('id');
let value = el.style['width'];
// or
let el = document.getElementById('id');
let value = el.style.width;
Retrieving the computed value of width.
The computed value is the one resulting from the evaluation of the relative units (in particular the percentage) and the possible consideration of
inherited values. If not, the computed value will be the initial value of the property, that is auto in the case of width.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('width');
Changing the value of width with JQuery.
$('#id').css('width', '50%');
Retrieving the computed value of width with JQuery.
let value = $('#id').css('width');
Other code examples.
Other examples of JavaScript code interacting with CSS styles are provided on the page Javascript and CSS.
Try it yourself.
The buttons below apply the entered value to the width property and then display either the value as it was applied, or the computed value.
This second option allows you to see how the value of width is serialized. In particular, you can see that all units are converted to pixels.
Simulator.
The simulator below allows you to distinguish between physical properties, such as width, and logical properties like inline-size,
which adapt to the writing mode of the language used.
It can also be useful for getting familiar with the less common dimension units, such as vw, vh, vmin, etc.
See CSS dimension units.
width property.
Browsers compatibility with width.
All these properties are properly supported by all current browsers. However, Internet Explorer does not handle logical properties (which take writing direction into account), but IE is no longer used.
width (which does not take into account the writing mode based on the language) to define the width of the element.inline-size to define the dimension of an element in the inline direction.block-size to define the dimension of an element in the block direction.widthproperty
inline-sizeproperty
block-sizeproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Samsung Internet
Safari
Safari sur IOS
Opéra
Firefox pour Androïd
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
KaiOS Browser
Opéra mini
Historic of the width property.
-
Cascading Style Sheets specification - Version 1
This first level of the CSS specification describes the mechanism of cascading style sheets. Authors and readers can add styles to documents. Mainly intended for formatting HTML documents, CSS allows defining colors, fonts, text formatting, spacing (margins), etc. The CSS language is easy to understand, readable, and easy to write; it uses common terms from desktop publishing.
Regardingwidth. Initial definition of thewidthproperty.
The width of an element is defined as the width of the content, excluding border thickness, and padding.
November 17, 1995Working Draft.
November 12, 1996Proposed for recommendation.
December 17, 1996Recommendation .
September 13, 2018Old specification, declared obsolete. -
Cascading Style Sheets Level 2 - Revision 1 Specification
This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.
Regardingwidth. Adding theinheritvalue for thewidthproperty to force inheritance of the parent's value.
Introduced thebox-sizingproperty which modifies the method of calculating the dimensions of an element.November 04, 1997Working Draft.March 24, 1998Proposed for recommendation.May 11, 1998Recommendation . -
CSS Logical Properties and Values Level 1
Regardingwidth. Introduction of two logical properties to define the dimensions of an element contextually in relation to the writing mode of the language used:inline-sizeandblock-size.May 18, 2017Working Draft.
-
CSS Box Sizing Module Level 3
Regardingwidth. Thewidthproperty supports values that define a dimension relative to content:min-content,max-content, etc.September 27, 2012Working Draft. -
CSS Box Sizing Module Level 4
Regardingwidth. No change to thewidthproperty.May 26, 2020Working Draft.
See also, regarding the size of the elements.
The properties width, inline-size, and block-size are described in the CSS Box Sizing Module module.
Many other definitions contribute to the dimensions of an element.
Properties:
height.width.