box-sizing

  • Revision slug: CSS/box-sizing
  • Revision title: box-sizing
  • Revision id: 298765
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

  • {{ Xref_cssinitial() }}: content-box
  • Applies to: all elements that accept width or height
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

box-sizing:  content-box | padding-box | border-box

Values

content-box
This is the default style as specified by the CSS standard. The {{ Cssxref("width") }} and {{ Cssxref("height") }} properties are measured including only the content, but not the border, margin, or padding.
padding-box{{ experimental_inline() }}
The {{ Cssxref("width") }} and {{ Cssxref("height") }} properties include the padding size, and do not include the border or margin.
border-box
The {{ Cssxref("width") }} and {{ Cssxref("height") }} properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode.

Examples

/* support Firefox, WebKit, Opera and IE8+ */

.example {
   -moz-box-sizing:    border-box;
    box-sizing:        border-box;
}

Specifications

Specification Status Comment
{{ SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing') }} {{ Spec2('CSS3 Basic UI') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0{{ property_prefix("-webkit") }}
9.0
1.0 (1.0){{ property_prefix("-moz") }}
[1]

8.0

7.0 3.0 (522){{ property_prefix("-webkit") }}
5.1 (534.12)
padding-box {{ CompatUnknown() }} 1.0 (1.0) {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} 1.0 (1.0){{ property_prefix("-moz") }} [1] Mango 7.5 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
padding-box {{ CompatUnknown() }} 1.0 (1.0) {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Notes

[1] The experimental, prefixed, implementation of box-sizing has a few bugs ({{ bug("243412") }}). They are little by little fixed:

  • Until Gecko 16.0 (Firefox 16) -moz-box-sizing didn't apply to table cells ({{ bug("338554") }});
  • Until Gecko 17.0 (Firefox 17), the min-height/max-height CSS properties don't work with -moz-box-sizing: border-box ({{ bug("308801") }})

There isn't yet a non-prefixed implementation in Gecko.

See also

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>box-sizing</code> <a href="/en-US/docs/CSS" title="/en-US/docs/CSS/Common_CSS_Questions">CSS</a> property is used to alter the default <a href="/en-US/docs/CSS/Box_model" title="/en-US/docs/CSS/Box_model">CSS box model</a> used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}:</dfn> <code>content-box</code></li>
  <li><dfn>Applies to:</dfn> all elements that accept width or height</li>
  <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li>
  <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}:</dfn> as specified</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre>
box-sizing:  content-box | padding-box | border-box</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>content-box</code></dt>
  <dd>
    This is the default style as specified by the CSS standard. The {{ Cssxref("width") }} and {{ Cssxref("height") }} properties are measured including only the content, but not the border, margin, or padding.</dd>
  <dt>
    <code>padding-box</code>{{ experimental_inline() }}</dt>
  <dd>
    The {{ Cssxref("width") }} and {{ Cssxref("height") }} properties include the padding size, and do not include the border or margin.</dd>
  <dt>
    <code>border-box</code></dt>
  <dd>
    The {{ Cssxref("width") }} and {{ Cssxref("height") }} properties include the padding and border, but not the margin. This is the <a href="/en-US/docs/CSS/Box_model" title="/en-US/docs/CSS/Box_model">box model</a> used by Internet Explorer when the document is in Quirks mode.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre class="brush: css">
/* support Firefox, WebKit, Opera and IE8+ */

.example {
   -moz-box-sizing:    border-box;
    box-sizing:        border-box;
}</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing') }}</td>
      <td>{{ Spec2('CSS3 Basic UI') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0{{ property_prefix("-webkit") }}<br />
          9.0</td>
        <td><strong>1.0</strong>&nbsp;(1.0){{ property_prefix("-moz") }}<br />
          [1]</td>
        <td>
          <p>8.0</p>
        </td>
        <td>7.0</td>
        <td><strong>3.0</strong>&nbsp;(522){{ property_prefix("-webkit") }}<br />
          <strong>5.1</strong>&nbsp;(<a class="external" href="http://trac.webkit.org/changeset/71348" title="http://trac.webkit.org/changeset/71348">534.12</a>)</td>
      </tr>
      <tr>
        <td><code>padding-box</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td><strong>1.0</strong>&nbsp;(1.0)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td><strong>1.0</strong>&nbsp;(1.0){{ property_prefix("-moz") }} [1]</td>
        <td>Mango 7.5</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td><code>padding-box</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td><strong>1.0</strong>&nbsp;(1.0)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Notes">Notes</h3>
<p>[1] The experimental, prefixed, implementation of <code>box-sizing</code> has a few bugs ({{ bug("243412") }}). They are little by little fixed:</p>
<ul>
  <li>Until Gecko 16.0 (Firefox 16) <code>-moz-box-sizing</code> didn't apply to table cells ({{ bug("338554") }});</li>
  <li>Until Gecko 17.0 (Firefox 17), the <code>min-height</code>/<code>max-height</code> CSS properties don't work with <code>-moz-box-sizing: border-box</code> ({{ bug("308801") }})</li>
</ul>
<p>There isn't yet a non-prefixed implementation in Gecko.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li><a class="internal" href="/en-US/docs/CSS/box_model" title="En/CSS/Box model">CSS box model</a></li>
</ul>
Revert to this revision