Revision 1004793 of -moz-float-edge

<div>{{CSSRef}}{{Non-standard_header}}</div>

<h2 id="Summary">Summary</h2>

<p>The non-standard <strong><code>-moz-float-edge</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property specifies whether the height and width properties of the element include the margin, border, or padding thickness.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">
/* Keyword values */
-moz-float-edge: border-box;
-moz-float-edge: content-box;
-moz-float-edge: margin-box;
-moz-float-edge: padding-box;

/* Global values */
-moz-float-edge: inherit;
-moz-float-edge: initial;
-moz-float-edge: unset;
</pre>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>border-box</code></dt>
 <dd>The height and width properties include the content, padding and border but not the margin.</dd>
 <dt><code>content-box</code></dt>
 <dd>The height and width properties include the content, but not the padding, border or margin.</dd>
 <dt><code>margin-box</code></dt>
 <dd>The height and width properties include the content, padding, border and margin.</dd>
 <dt><code>padding-box</code></dt>
 <dd>The height and width properties include the content and padding but not the border or margin.</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<h2 id="Example" name="Example">&nbsp;</h2>

<h2 id="Example" name="Example">Example</h2>

<h3 id="HTML_Content">HTML Content<code class="language-html"> </code></h3>

<pre class="brush: html">
<code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"box</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code>
&nbsp;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;<code class="language-html">
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>

<h3 id="CSS_Content">CSS Content</h3>

<pre class="brush: css">
.box {
    display: block;
    height: 5px;
    margin: 0.5em auto 0.5em auto;
    color: gray;
    -moz-float-edge: margin-box;
    box-sizing: border-box;
} </pre>

<p><br />
 Live Example</p>

<p>&nbsp;</p>

<p>{{ EmbedLiveSample('HTML_Content', '', '', '', 'Web/CSS/-moz-float-edge') }}</p>

<p>&nbsp;</p>

<h2 id="See_also">See also</h2>

<p>{{bug(432891)}}</p>