mozilla

Revision 137549 of -moz-box-sizing

  • Revision slug: CSS/-moz-box-sizing
  • Revision title: -moz-box-sizing
  • Revision id: 137549
  • Created:
  • Creator: j.j.
  • Is current revision? No
  • Comment 45 words added, 11 words removed

Revision Content

{{ CSSMozExtensionRef() }}

Summary

-moz-box-sizing is used by mozilla browsers to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to allow mozilla to emulate the behavior of browsers that do not correctly support the CSS box model specification, though this is not recommended as most standards-compliant browsers do not support this property.

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

Syntax

-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.
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

.exampleone {
	-moz-box-sizing: padding-box;
}

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer (8.0 -ms-box-sizing expected)
Firefox 1.0 -moz-box-sizing
Opera 7.0 box-sizing
Safari 3.0 -webkit-box-sizing
  • padding-box isn't part of CSS3-UI and only supported by Firefox (Gecko).

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

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<h3 name="Summary">Summary</h3>
<p><code>-moz-box-sizing</code> is used by mozilla browsers to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to allow mozilla to emulate the behavior of browsers that do not correctly support the CSS box model specification, though this is not recommended as most standards-compliant browsers do not support this property.</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 name="Syntax">Syntax</h3>
<pre class="eval">-moz-box-sizing: content-box | border-box | padding-box 
</pre>
<h3 name="Values">Values</h3>
<dl><dt> content-box</dt><dd> 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. </dd><dt> padding-box</dt><dd> The width and height properties include the padding size, and do not include the border or margin. </dd><dt> border-box</dt><dd> 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 <a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dhtmltechcol/dndhtml/cssenhancements.asp"></a>. </dd></dl>
<h3 name="Examples">Examples</h3>
<pre>.exampleone {
	-moz-box-sizing: padding-box;
}
</pre>
<h3 name="Specifications">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> <li><a class="external" href="http://www.w3.org/TR/css3-layout/#box-sizing" title="http://www.w3.org/TR/css3-layout/#box-sizing">CSS Advanced Layout #box-sizing</a>  (early working draft, expected to change)</li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>(8.0 <code>-ms-box-sizing</code> expected)</td> </tr> <tr> <td>Firefox</td> <td>1.0<code> -moz-box-sizing</code></td> </tr> <tr> <td>Opera</td> <td>7.0<code> box-sizing</code></td> </tr> <tr> <td>Safari</td> <td>3.0<code> -webkit-box-sizing</code></td> </tr> </tbody>
</table>
<ul> <li><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).</li>
</ul>
<p>{{ languages( { "fr": "fr/CSS/-moz-box-sizing", "pl": "pl/CSS/-moz-box-sizing" } ) }}</p>
Revert to this revision