Question

In the following code I would expect to see 15px of vertical space between div a and div b. Why do I not see any space? Edit: Many people are not answering the question. I don’t want to get something working, I want an explanation for the behavior I see.

<div class="a"> 
  <span> lkjjj </span>
</div>

<div class="b"> 
  <span> lkj lkjl kjlj l  </span>
</div>



.a { width: 50px; border: 1px solid gray; float: left; }

.b { 
  margin: 15px 0 0 0; 
  clear: both; 
  overflow: hidden;
  border: 1px solid gray; 
 }

​Here is a jsfiddle to illustrate.

http://jsfiddle.net/nUNM6/

Answer 1

You have floating and margin-collapse

Here are three examples next to each other
http://jsfiddle.net/nUNM6/6/

Inspect carefully the margin of .b in Firefox Firebug or Chrome Element-Inspector

---

edit
changed something in jsfiddle