width
Summary
Specifies the width of the content area of an element. The content area of the element width does not include the padding, border, and margin of the element.
Overview table
- Initial value
auto
- Applies to
- All elements except inline, non-replaced elements, table rows, and row groups.
- Inherited
- No
- Media
- visual
- Computed value
- percentage or absolute length
- Animatable
- Yes
- CSS Object Model Property
/css/cssom/properties/width
- Percentages
- refer to width of containing block
Syntax
width: auto
width: available
width: border-box
width: content-box
width: fit-content
width: intrinsic
width: length
width: max-content
width: min-content
width: percentage
Values
- auto
- If auto is set for the elements width, the browser will determine the width for the element.
- length
- Will take a number that is immediately followed by a length unit such as px, em, in, etc.
- percentage
- Integer, followed by a %. The value is a percentage of the width of the parent object, whether or not it is specified explicitly. Negative values are not allowed.
- border-box
- If border-box is used, the length or percentage defined will be applied to the element’s border box.
- content-box
- If content-box is used, the length or percentage defined will be applied to the element’s content-box.
- max-content
- The intrinsic preferred width
- min-content
- The intrinsic minimum width
- available
- The containing block width minus horizontal margin, border, and padding
- fit-content
- This will be either the large of the minimum width or the smaller of the preferred width and the available width
- intrinsic
- This is an experimental rule for max-content. Currently it only works in Chrome, however you should be using max-content instead since that is the standard.
Examples
div { width: 100% }
h1 { width: 20em }
section { width: auto }
img { width: 100px }
Example using new values that are part of the CSS Basic Box Model that is currently in working draft.
<style>
/* Width values of the CSS Box Model working draft */
div {
box-sizing: border-box;
border: 1px solid #444;
width: 350px;
margin: 5px;
}
p {
background: #000;
color: #fff;
padding: 5px;
font-family: Arial, sans-serif;
}
p.mincontent {
/* vendor prefix needed */
width: -webkit-min-content;
}
p.maxcontent {
/* vendor prefix needed */
width: -webkit-max-content;
}
p.fitcontent {
/* vendor prefix needed */
width: -webkit-fit-content;
}
</style>
<div>
<p>This is the content inside of the parent div.</p>
</div>
<div>
<p class="mincontent">This is the content inside of the parent div.</p>
<p class="mincontent">Min-content matches the widest single word like "Antidisestablishmentarianism".</p>
</div>
<div>
<p class="maxcontent">This is the content inside of the parent div. Max-content expands to fit the content.</p>
</div>
<div>
<p class="fitcontent">This fits the content inside of the parent div.</p>
</div>
Usage
===Newer Values===
In the CSS Basic Box Model Working Draft, the values max-content, min-content, available, fit-content, border-box, and content-box were added. It would be a best practice to add the vendor prefix to these until the values are standardized.
Related specifications
- CSS Basic Box Model
- Working Draft
- CSS Level 2
- Recommendation
- CSS Level 1
- Recommendation
See also
External resources
- http://www.w3.org/TR/CSS2/visudet.html#the-width-property
- http://www.w3.org/TR/CSS21/visudet.html#propdef-width
Related pages
- CSSStyleDeclarationCSSStyleDeclaration
- currentStylecurrentStyle
- runtimeStyleruntimeStyle
- stylestyle
Conceptual
Measuring Element Dimension and Location with CSSOM in Internet Explorer 9
Other Resources
CSS Enhancements in Internet Explorer 6
Attributions
Mozilla Developer Network : Article
Microsoft Developer Network: [Windows Internet Explorer API reference Article]