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

webkitMarginCollapse style property

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

Syntax:

object.webkitMarginCollapse;
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-collapse

Possible values:

The type of this property is string.
 One of the following values: 
 Values in this order (use the space character to separate them): 
1. <-webkit-margin-top-collapse>
2. <-webkit-margin-bottom-collapse>
collapse
discard
separate
inherit

Description of values:

-webkit-margin-bottom-collapse
Specifies or retrieves whether the top and bottom margins can be shared between adjacent elements.
-webkit-margin-top-collapse
Specifies or retrieves whether the top and bottom margins can be shared between adjacent elements.
collapse
Default. 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 collapse.

If only one value is specified, it affects both the webkitMarginTopCollapse and webkitMarginBottomCollapse properties.

Example HTML code 1:

This example illustrates the use of the -webkit-margin-collapse property:
<head>
    <style>
        .collMargin {
            -webkit-margin-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>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the webkitMarginCollapse property in JavaScript:
<head>
    <style>
        .collMargin {
            -webkit-margin-collapse: separate;
            margin:20px;
        }
    </style>
    <script type="text/javascript">
        function ChangeCollapse () {
            var sheet = document.styleSheets[0];
            var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
            var rule = rules[0];

            if ('WebkitMarginCollapse' in rule.style) {
                var col = rule.style.WebkitMarginCollapse;
                rule.style.WebkitMarginCollapse = (col == "separate")? "collapse" : "separate";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <button onclick="ChangeCollapse ();">Change 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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content