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

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > webkitMarginBottomCollapse

webkitMarginBottomCollapse style property

Browser support:

Specifies or retrieves whether the top and bottom margins can be shared between adjacent elements.

Syntax:

object.webkitMarginBottomCollapse;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: -webkit-margin-bottom-collapse

Possible values:

The type of this property is string.

One of the following values:

collapse

Default. Vertical margins are collapsed with the adjacent elements.

discard

Discards the margin.

inherit

Takes the value of this property from the computed style of the parent element.

separate

Default. Separate margins are drawn for the adjacent elements.

Default: collapse.

Example HTML code 1:

This example illustrates the use of the -webkit-margin-bottom-collapse property:

<head>
    <style>
        .collMargin {
            -webkit-margin-bottom-collapse: separate;
            -webkit-margin-top-collapse: separate;
            margin:20px;
        }
    </style>
</head>
<body>
    <div class="collMargin" style="border:3px solid #000000;">
        The margins are separate
    </div>
    <div class="collMargin" style="border:3px solid #000000;">
        between these two divisions
    </div>
    <div style="border:3px solid #000000;margin:20px;">
        The margins are collapsed
    </div>
    <div style="border:3px solid #000000;margin:20px;">
        between these two divisions
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the webkitMarginBottomCollapse property in JavaScript:

<head>
    <style>
        .collMargin {
            -webkit-margin-bottom-collapse: separate;
            -webkit-margin-top-collapse: separate;
            margin:20px;
        }
    </style>
    <script type="text/javascript">
        function GetFirstRule () {
            var sheet = document.styleSheets[0];
            var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
            return rules[0];
        }

        function ChangeBottomCollapse () {
            var rule = GetFirstRule ();

            if ('WebkitMarginBottomCollapse' in rule.style) {
                var col = rule.style.WebkitMarginBottomCollapse;
                rule.style.WebkitMarginBottomCollapse = (col == "separate")? "collapse" : "separate";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }

        function ChangeTopCollapse () {
            var rule = GetFirstRule ();

            if ('WebkitMarginTopCollapse' in rule.style) {
                var col = rule.style.WebkitMarginTopCollapse;
                rule.style.WebkitMarginTopCollapse = (col == "separate")? "collapse" : "separate";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <button onclick="ChangeBottomCollapse ();">Change Bottom Collapse</button>
    <button onclick="ChangeTopCollapse ();">Change Top Collapse</button>
    <div class="collMargin" style="border:3px solid #000000;">
        The margins are separate
    </div>
    <div class="collMargin" style="border:3px solid #000000;">
        between these two divisions
    </div>
    <div style="border:3px solid #000000;margin:20px;">
        The margins are collapsed
    </div>
    <div style="border:3px solid #000000;margin:20px;">
        between these two divisions
    </div>
</body>