0

Here is demo: http://jsfiddle.net/vvvqwac2/

You can see in FF and in Chromuim that "Hi2" block has weird top margin which is not intended to be there. Why is it appeared and how to fix it correctly?

HTML:

<div id="container">
    <div id="b1">
        <h3>hi1</h3>
    </div>
    <div id="b2">
        <h3>hi2</h3>
    </div>
</div>

CSS:

#container {
    padding: 10px;
}

#b1 {
  float: left;
  width: 100px;
  height: 400px;
  background: blue;
} 

#b2 {
  height: 100px;
  background: orange;
}
vaultah
  • 44,105
  • 12
  • 114
  • 143
Dfr
  • 4,075
  • 10
  • 40
  • 63

6 Answers6

1

Just add:

h3{margin:0}

by default heading tags has some style such as margins.

izorgor
  • 138
  • 8
1

<h3>hi2</h3> adds its own margin, set it to 0 explicitly.

h3 {
    margin: 0; /* Disable margin for all h3 elements ... */
}

#container {
    padding: 10px;
}

#b1 {
  float: left;
  width: 100px;
  height: 400px;
  background: blue;
} 

#b2 {
  height: 100px;
  background: orange;
}

    #b2 > h3 {
        margin: 0; /* ... or disable margin ONLY for the first h3 child of #b2 */
    }
<div id="container">
    <div id="b1">
        <h3>hi1</h3>
    </div>
    <div id="b2">
        <h3>hi2</h3>
    </div>
</div>

It's also a common practice to disable padding and margin for html and body:

html, body {
    margin: 0;
    padding: 0;
}
vaultah
  • 44,105
  • 12
  • 114
  • 143
0

Change the CSS

#container {
    padding: 0px;
}

#b1 {
  float: left;
  width: 100px;
  height: 400px;
  background: blue;
} 

#b2 {
  height: 100px;
  background: orange;
}
Suraj
  • 2,181
  • 2
  • 17
  • 25
0

Adding overflow:auto to your containing div would fix your collapsing margin issue.

#b2 {
  height: 100px;
  background: orange;
  overflow:auto; /* add this */
}

DEMO

Floats, absolutely [and fixed] positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

It is this change of block formatting context that the margin (and in the case of a preceding float, padding of following inflow elements) operates.

reference : block formatting context

more from SO : Why would margin not be contained by parent element?

Community
  • 1
  • 1
4dgaurav
  • 11,360
  • 4
  • 32
  • 59
0

It is due to the padding in the parent element. You have applied 10px padding to the parent element which is showing in hi2.

In hi1 this padding is not visible because you have applied floating on it. When you apply floating on any element than that has been taken out from the normal flow of the document. You can read more about floats in following link.

https://developer.mozilla.org/en/docs/Web/CSS/float

Your problem can be fixed by adding overflow:hidden; in #b2 element.

#b2 {
  height: 100px;
  background: orange;
     overflow:hidden;
}
Ismail Zafar
  • 174
  • 1
  • 11
0

"Hi2" block has weird top margin， because 

#container {
   padding: 10px;
}

b2 doesn't float,so it is in the document flow

b1 float makes it from the document flow

Sender
  • 6,660
  • 12
  • 47
  • 66
yogi
  • 1