This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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>

View live example

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

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