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

You are here: Reference > CSS > properties > browser specific extensions > -webkit-margin-collapse

-webkit-margin-collapse property

Browser support:

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

JavaScript page for this property: webkitMarginCollapse. You can find other example(s) there.

Possible values:

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 whether the top and bottom margins can be shared between adjacent elements.

-webkit-margin-top-collapse

Specifies 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 -webkit-margin-top-collapse and -webkit-margin-bottom-collapse 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>