Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 1006107 of -moz-float-edge

  • Revision slug: Web/CSS/-moz-float-edge
  • Revision title: -moz-float-edge
  • Revision id: 1006107
  • Created:
  • Creator: duncanmcdonald
  • Is current revision? Yes
  • Comment

Revision Content

   {{CSSRef}}{{Non-standard_header}}

Summary

The non-standard -moz-float-edge CSS property specifies whether the height and width properties of the element include the margin, border, or padding thickness.

{{cssinfo}}

Syntax

/* 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;

Values

border-box
The height and width properties include the content, padding and border but not the margin.
content-box
The height and width properties include the content, but not the padding, border or margin.
margin-box
The height and width properties include the content, padding, border and margin.
padding-box
The height and width properties include the content and padding but not the border or margin.

Formal syntax

{{csssyntax}}

 

Example

HTML Content

<div class="box"> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

CSS Content

.box {
    display: block;
    height: 5px;
    margin: 0.5em auto 0.5em auto;
    color: gray;
    -moz-float-edge: margin-box;
    box-sizing: border-box;
} 

Result

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/-moz-float-edge') }}

See also

{{bug(432891)}}

Revision Source

<div>&nbsp;&nbsp; {{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</h3>

<pre class="html prettyprint">
<span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box"</span><span class="tag">&gt;</span><span class="pln"> </span>
<span class="pln">   </span><span class="tag">&lt;p&gt;</span><span class="pln">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></pre>

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

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

<h3 id="Live_Example">Result</h3>

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

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

<p>{{bug(432891)}}</p>
Revert to this revision