In order to access this site you need to enable JavaScript!

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>