Why top margin is not visible?

Question

Below is the given html code,

<div class="row">
  <div class="column">
    Some text
  </div>
  <div class="column blue">
    Some other text
  </div>
</div>

First case - Below is the css code applied, without setting margin,

.row {
   background: red; 
}

.column {
  #margin: 10px;
  background: green;
}

.blue {
  background: blue;
}

and the output is:

Second case - Below is the css code, after setting margin,

.row {
   background: red; 
}

.column {
  margin: 10px;
  background: green;
}

.blue {
  background: blue;
}

with the output,

Third case - Below is the css code, with overflow set as hidden

.row {
  background: red; 
  overflow: hidden;
}

.column {
  margin: 10px;
  background: green;
}

.blue {
  background: blue;
}

with the output,

1)

In above second case, Why does the container having 2 div elements does not expand on top margin?

2)

In above third case, Why does the container having 2 div elements expand on top margin?

Did you not read the post [I linked you to in chat](http://chat.stackoverflow.com/transcript/message/25785311#25785311) (which your question has just been marked a duplicate of)? If you did, what did you not understand from my answer? — BoltClock, Sep 18 '15 at 12:29

score 0 · Answer 1 · answered Sep 18 '15 at 12:25

0

By placing an overflow:hidden on the containing element you are changing it's Block Formatting Context. Only a few styles do this.

I usually use this method to self clear modules.

answered Sep 18 '15 at 12:25

Adam Hughes

In second case, why margins of container and first div element are equal on top side? – overexchange Sep 18 '15 at 23:05

1 Answers1