You are here: Reference > CSS > properties > browser specific extensions > -moz-float-edge

-moz-float-edge property

Browser support:
Specifies whether the height and width properties of the element include the margin, border, or padding thickness.
In other browsers you can get the same functionality with table cells.
JavaScript page for this property: MozFloatEdge. You can find other example(s) there.

Possible values:

 One of the following values: 
border-box
The height and width properties include the padding and the border but not the margin.
content-box
The height and width properties include the content but not the margin, border and the padding.
inherit
Takes the value of this property from the computed style of the parent element.
margin-box
The height and width properties include everything (margin, border, padding, content).
padding-box
The height and width properties include the padding but not the margin and the border.
Default: content-box.

Example HTML code 1:

This example illustrates the use of the -moz-float-edge property:
<head>
    <style>
        .floating {
            float: left;
            background-color: #ffbc79;
            width: 30px;
            height: 20px;
        }
        ul {
            margin: 0px;
            padding: 0px;
        }
        li {
            list-style-position: inside;
            background-color: #aae3ff;
            color: black;
            margin-bottom: 5px;
            margin-left: 5px;
            border: 3px dashed gray;
            display: block;
        }

        li.contentBox {
            -moz-float-edge: content-box;
        }
        li.paddingBox {
            -moz-float-edge: padding-box;
        }
        li.borderBox {
            -moz-float-edge: border-box;
        }
        li.marginBox {
            -moz-float-edge: margin-box;
        }
    </style>
</head>
<body>
    <div class="floating"></div>
    <ul>
        <li class="contentBox">content-box</li>
        <li class="contentBox">content-box</li>
    </ul>
    <br />
    <div class="floating"></div>
    <ul>
        <li class="paddingBox">padding-box</li>
        <li class="paddingBox">padding-box</li>
    </ul>
    <br />
    <div class="floating"></div>
    <ul>
        <li class="borderBox">border-box</li>
        <li class="borderBox">border-box</li>
    </ul>
    <br />
    <div class="floating"></div>
    <ul>
        <li class="marginBox">margin-box</li>
        <li class="marginBox">margin-box</li>
    </ul>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content