mozilla
Your Search Results

    width Redirect 1

    Summary

    The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.

    The min-width and max-width properties override width.

    • Initial value auto
    • Applies to all elements but non-replaced inline elements, table rows, and row groups
    • Inherited no
    • Percentages refer to the width of the containing block
    • Media visual
    • Computed value the percentage or auto as specified or the absolute length
    • Animatable yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
    • Canonical order the length or percentage before the keyword, if both are present

    Syntax

    Formal syntax: [<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | auto
    width: 300px        /* <length> values */
    width: 25em
    
    width: 75%          /* <percentage> values */
    
    width: border-box   /* Keyword values */
    width: content-box
    width: max-content
    width: min-content
    width: available
    width: fit-content
    width: auto
    
    width: inherit
    

    Values

    <length>
    See <length> for possible units.
    <percentage>
    Specified as a <percentage> of containing block's width.
    border-box
    If present, the preceding <length> or <percentage> is applied to the element's border box.
    content-box
    If present, the preceding <length> or <percentage> is applied to the element's content box.
    auto
    The browser will calculate and select a width for the specified element.
    max-content
    The intrinsic preferred width.
    min-content
    The intrinsic minimum width.
    available
    The containing block width minus horizontal margin, border and padding.
    Note: WebKit implements a variation of this value, under the name fill-available as of December 2013.
    fit-content
    The larger of:
    • the intrinsic minimum width
    • the smaller of the intrinsic preferred width and the available width
    Note: WebKit implements an earlier version of this value, under the name intrinsic, but as of June 2012, implements fit-content as well.

    Examples

    table { width: 100%; }
    
    img   { width: 200px; }
    
    form  { width: auto; }
    
    p     { width: 40em; }

    View the live example


    p { background: gold }

    The Mozilla community produces a lot of great software.


    p {
      background: lightgreen;
      width: intrinsic;			/* Safari/WebKit uses a non-standard name */
      width: -moz-max-content;	/* Firefox/Gecko */
    }

    The Mozilla community produces a lot of great software.


    p { background: lightblue;  max-width: -moz-min-content; }

    The Mozilla community produces a lot of great software.

    Specifications

    Specification Status Comment
    CSS Basic Box Model Working Draft Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
    CSS Transitions Working Draft Lists width as animatable.
    CSS Level 2 (Revision 1) Recommendation Precises on which element it applies to.
    CSS Level 1 Recommendation Initial specification.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support (Yes) 1.0 (1.7 or earlier) 4 3.5 1.0 (85)
    Animatability ? 16.0 (16.0) ? ? ?
    max-content 22 -webkit 3.0 (1.9)-moz ? 15 -webkit

    2.0 (421) (intrinsic value)

    6.1 -webkit

    min-content 22 -webkit 3.0 (1.9) -moz ? 15 -webkit 6.1 -webkit
    available Not supported 3.0 (1.9) -moz ? ? ?
    fill-available (Yes) Not supported ? ? ?
    fit-content 22 -webkit 3.0 (1.9) -moz ? 15 -webkit 6.1 -webkit
    border-box and content-box Not supported Not supported Not supported Not supported Not supported
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,
    Hide Sidebar