mozilla

Revision 28064 of box-sizing

  • Revision slug: CSS/Box-sizing
  • Revision title: box-sizing
  • Revision id: 28064
  • Created:
  • Creator: grendel
  • Is current revision? No
  • Comment Added new compat table; 76 words added

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. Mozilla browsers like Firefox support -moz-box-sizing.

  • {{ Xref_cssinitial() }}: {{ Cssxref("content-box") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

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

Values

content-box
This is the default style as specified by the CSS standard. The width and height properties are measured including only the content, but not the border, margin, or padding.
padding-box
The width and height properties include the padding size, and do not include the border or margin. {{ non-standard_inline() }} padding-box isn't part of CSS3-UI and only supported by Firefox (Gecko).
border-box
The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is not in standards-compliant mode.

Examples

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

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

Notes

See {{ bug("243412") }} and its dependents:

  • -moz-box-sizing doesn't apply to table cells
  • min-height/max-height does not work for -moz-box-sizing: border-box

Specifications

Browser compatibility

Browser Lowest Version Support of
Internet Explorer 8.0 box-sizing
Firefox (Gecko) 1.0 (1.0) -moz-box-sizing
Opera 7.0 box-sizing
Safari (WebKit) 3.0 (522) -webkit-box-sizing

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

CSS box model

{{ languages( { "fr": "fr/CSS/box-sizing", "pl": "pl/CSS/box-sizing" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> box-sizing </code>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. Mozilla browsers like Firefox support<code> -moz-box-sizing</code>.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("content-box") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: n/a</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3>Syntax</h3>
<pre>box-sizing:       content-box | border-box</pre>
<pre class="eval">-moz-box-sizing:  content-box | border-box | padding-box </pre>
<h3>Values</h3>
<dl> <dt>content-box</dt> <dd>This is the default style as specified by the CSS standard. The<code> width </code>and<code> height </code>properties are measured including only the content, but not the border, margin, or padding.</dd> <dt>padding-box</dt> <dd>The<code> width </code>and<code> height </code>properties include the padding size, and do not include the border or margin.<code> </code>{{ non-standard_inline() }}<code> padding-box </code>isn't part of <a class="external" href="http://www.w3.org/TR/css3-ui/#box-sizing" title="http://www.w3.org/TR/css3-ui/#box-sizing">CSS3-UI</a> and only supported by Firefox (Gecko).</dd> <dt>border-box</dt> <dd>The<code> width </code>and<code> height </code>properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is not in standards-compliant mode.</dd>
</dl>
<h3>Examples</h3>
<pre>/* support Firefox, Safari/WebKit, Opera and IE8 */

.example {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}</pre>
<h3>Notes</h3>
<p>See {{ bug("243412") }} and its dependents:</p>
<ul> <li><code>-moz-box-sizing </code>doesn't apply to table cells</li> <li><code>min-height/max-height </code>does not work for<code> -moz-box-sizing: border-box</code></li>
</ul>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-ui/#box-sizing" title="http://www.w3.org/TR/css3-ui/#box-sizing">CSS3 Basic User Interface #box-sizing</a></li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th>Support of</th> </tr> <tr> <td>Internet Explorer</td> <td><strong>8.0</strong></td> <td><code>box-sizing</code></td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.0</strong> (1.0)</td> <td><code>-moz-box-sizing</code></td> </tr> <tr> <td>Opera</td> <td><strong>7.0</strong></td> <td><code>box-sizing</code></td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>3.0</strong> (522)</td> <td><code>-webkit-box-sizing</code></td> </tr> </tbody>
</table>
<h3 name="Browser_Compatibility">Browser compatibility</h3>
<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>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</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 Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
<h3>See also</h3>
<p><a class="internal" href="/en/CSS/box_model" title="En/CSS/Box model">CSS box model</a></p>
<p>{{ languages( { "fr": "fr/CSS/box-sizing", "pl": "pl/CSS/box-sizing" } ) }}</p>
Revert to this revision