Revision 137552 of -moz-box-sizing

Revision slug: CSS/-moz-box-sizing
Revision title: -moz-box-sizing
Revision id: 137552
Created: Mar 9, 2009, 4:21:26 AM
Creator: Sheppy
Is current revision? No
Comment 2 words added, 2 words removed

Tags:

Revision Content

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. Some other browsers support box-sizing as specified in CSS3.

{{ 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. 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;
}

Specifications

CSS3 Basic User Interface #box-sizing
CSS3 Advanced Layout #box-sizing (early working draft, expected to change)

Browser compatibility

Browser	Lowest Version
Internet Explorer	8.0 `box-sizing`
Firefox	1.0 `-moz-box-sizing`
Opera	7.0 `box-sizing`
Safari	3.0 `-webkit-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. Some other browsers support<code> box-sizing </code>as specified in CSS3.</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.<code> padding-box </code>isn't part of <a class="external" href="https://www.w3.org/TR/css3-ui/#box-sizing" title="https://www.w3.org/TR/css3-ui/#box-sizing">CSS3-UI</a> and only supported by Firefox (Gecko). </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="https://msdn.microsoft.com/library/default.asp?url=/library/en-us/dhtmltechcol/dndhtml/cssenhancements.asp"></a>. </dd></dl>
<h3 name="Examples">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 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="https://www.w3.org/TR/css3-ui/#box-sizing" title="https://www.w3.org/TR/css3-ui/#box-sizing">CSS3 Basic User Interface #box-sizing</a></li> <li><a class="external" href="https://www.w3.org/TR/css3-layout/#box-sizing" title="https://www.w3.org/TR/css3-layout/#box-sizing">CSS3 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> box-sizing</code></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>
<h3 name="See_also">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/-moz-box-sizing", "pl": "pl/CSS/-moz-box-sizing" } ) }}</p>

Revert to this revision