Clear Fix and Uncollapse Margins with CSS Without Side Effects

How do I uncollapse a margin?

well you need something in between to "break" the collapsing.

my first thought was to use a div with display:none set in between, but that doesn't seem to work.

so I tried:

<div style="overflow: hidden; height: 0px; width: 0px;">.</div>

which seems to do the job nicely (at least in firefox, don't have internet explorer installed here to test it...)

<html>
    <body>
        <div style="margin: 100px;">.</div>
        <div style="overflow: hidden; height: 0px; width: 0px;">.</div>
        <div style="margin: 100px;">.</div>
    </body>
</html>

How to disable margin-collapsing?

There are two main types of margin collapse:

Collapsing margins between adjacent elements
Collapsing margins between parent and child elements

Using a padding or border will prevent collapse only in the latter case. Also, any value of overflow different from its default (visible) applied to the parent will prevent collapse. Thus, both overflow: auto and overflow: hidden will have the same effect. Perhaps the only difference when using hidden is the unintended consequence of hiding content if the parent has a fixed height.

Other properties that, once applied to the parent, can help fix this behaviour are:

float: left / right
position: absolute
display: inline-block / flex / grid

You can test all of them here: http://jsfiddle.net/XB9wX/1/.

I should add that, as usual, Internet Explorer is the exception. More specifically, in IE 7 margins do not collapse when some kind of layout is specified for the parent element, such as width.

Sources: Sitepoint's article Collapsing Margins

Removing body margin in CSS

I would say that using:

* {
  margin: 0;
  padding: 0;
}

is a bad way of solving this.

The reason for the h1 margin popping out of the parent is that the parent does not have a padding.

If you add a padding to the parent element of the h1, the margin will be inside the parent.

Resetting all paddings and margins to 0 can cause a lot of side effects. Then it's better to remove margin-top for this specific headline.

CSS: Margin-top when parent's got no border

You could add overflow:auto to .body to prevent margin-collapsing. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins

What methods of ‘clearfix’ can I use?

Depending upon the design being produced, each of the below clearfix CSS solutions has its own benefits.

The clearfix does have useful applications but it has also been used as a hack. Before you use a clearfix perhaps these modern css solutions can be useful:

css flexbox
css grid

Modern Clearfix Solutions

Container with `overflow: auto;`

The simplest way to clear floated elements is using the style overflow: auto on the containing element. This solution works in every modern browsers.

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

One downside, using certain combinations of margin and padding on the external element can cause scrollbars to appear but this can be solved by placing the margin and padding on another parent containing element.

Using ‘overflow: hidden’ is also a clearfix solution, but will not have scrollbars, however using hidden will crop any content positioned outside of the containing element.

Note: The floated element is an img tag in this example, but could be any html element.

Clearfix Reloaded

Thierry Koblentz on CSSMojo wrote: The very latest clearfix reloaded. He noted that by dropping support for oldIE, the solution can be simplified to one css statement. Additionally, using display: block (instead of display: table) allows margins to collapse properly when elements with clearfix are siblings.

.container::after {
  content: "";
  display: block;
  clear: both;
}

This is the most modern version of the clearfix.

⋮

Older Clearfix Solutions

The below solutions are not necessary for modern browsers, but may be useful for targeting older browsers.

Note that these solutions rely upon browser bugs and therefore should be used only if none of the above solutions work for you.

They are listed roughly in chronological order.

"Beat That ClearFix", a clearfix for modern browsers

Thierry Koblentz' of CSS Mojo has pointed out that when targeting modern browsers, we can now drop the zoom and ::before property/values and simply use:

.container::after {
    content: "";
    display: table;
    clear: both;
}

This solution does not support for IE 6/7 …on purpose!

Thierry also offers: "A word of caution: if you start a new project from scratch, go for it, but don’t swap this technique with the one you have now, because even though you do not support oldIE, your existing rules prevent collapsing margins."

Micro Clearfix

The most recent and globally adopted clearfix solution, the Micro Clearfix by Nicolas Gallagher.

Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

Overflow Property

This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.

http://www.quirksmode.org/css/clearing.html
- explains how to resolve common issues related to this technique, namely, setting width: 100% on the container.

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

Rather than using the display property to set "hasLayout" for IE, other properties can be used for triggering "hasLayout" for an element.

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

Another way to clear floats using the overflow property is to use the underscore hack. IE will apply the values prefixed with the underscore, other browsers will not. The zoom property triggers hasLayout in IE:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

While this works... it is not ideal to use hacks.

PIE: Easy Clearing Method

This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS.

This solution is quite old, but you can learn all about Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html

Element using "clear" property

The quick and dirty solution (with some drawbacks) for when you’re quickly slapping something together:

<br style="clear: both" /> <!-- So dirty! -->

Drawbacks

It's not responsive and thus may not provide the desired effect if layout styles change based upon media queries. A solution in pure CSS is more ideal.
It adds html markup without necessarily adding any semantic value.
It requires a inline definition and solution for each instance rather than a class reference to a single solution of a “clearfix” in the css and class references to it in the html.
It makes code difficult to work with for others as they may have to write more hacks to work around it.
In the future when you need/want to use another clearfix solution, you won't have to go back and remove every <br style="clear: both" /> tag littered around the markup.

Why are my div margins overlapping and how can I fix it?

I think it's a collapsed margin.
Only the largest margin between the bottom of the first element and the top of the second is taken into account.

It is quite normal to don't have too much space between two paragraphs eg.

~~You cannot avoid that with two adjacent elements so you have to enlarge or reduce the larger margin.~~

EDIT: cf. W3C

Two margins are adjoining if and only if:
both belong to in-flow block-level boxes that participate in the same block formatting context
no line boxes, no clearance, no padding and no border separate them
both belong to vertically-adjacent box edges

So there is no collapsing with float which takes the element out of the flow.

How to Fix Collapsing Top and Bottom Margins?

This answer is based off of the fiddle you provided.

I think your approach is incorrect in that your applying a margin to the article to space it within the parent div tag. It is better to use padding in this case, since your attempting to separate the content from its outside border. So apply:

article {
  //display: block;
  clear: both;
  padding: 10px;
}

This will cause the article tags to increase in size, however the borders of the container div elements will now be touching. To create space between elements a margin is applied.

.rounded-box {
  background-color: #959392;
  border-radius: 15px;
  margin: 10px 0px;
}

Working Example http://jsfiddle.net/LCTeU/4/

So just to recap, when you want to create space between two elements use margin. When you want to create space between an element and its border (or you want an element to be surrounded by whitespace) use padding.

Clear Fix and Uncollapse Margins with CSS Without Side Effects

How do I uncollapse a margin?

How to disable margin-collapsing?

Removing body margin in CSS

CSS: Margin-top when parent's got no border

What methods of ‘clearfix’ can I use?

Modern Clearfix Solutions

Container with `overflow: auto;`

Clearfix Reloaded

Older Clearfix Solutions

"Beat That ClearFix", a clearfix for modern browsers

Micro Clearfix

Overflow Property

PIE: Easy Clearing Method

Element using "clear" property

Drawbacks

Why are my div margins overlapping and how can I fix it?

How to Fix Collapsing Top and Bottom Margins?

Related Topics

Leave a reply

How do I uncollapse a margin?

How to disable margin-collapsing?

Removing body margin in CSS

CSS: Margin-top when parent's got no border

What methods of ‘clearfix’ can I use?

Modern Clearfix Solutions

Container with overflow: auto;

Clearfix Reloaded

Older Clearfix Solutions

"Beat That ClearFix", a clearfix for modern browsers

Micro Clearfix

Overflow Property

PIE: Easy Clearing Method

Element using "clear" property

Drawbacks

Why are my div margins overlapping and how can I fix it?

How to Fix Collapsing Top and Bottom Margins?

Related Topics

Leave a reply

Container with `overflow: auto;`