CODEWITHSUNDEEP
htmlcss
Lyn Headley
Lyn Headley

Reputation: 11598

Why is there no vertical space inserted between these two divs?

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/

Upvotes: 1

Views: 923

Answers (6)

yunzen
yunzen

Reputation: 33439

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

Upvotes: 1

Surreal Dreams
Surreal Dreams

Reputation: 26380

You can insert this code between the two divs, a & b:

<div class="clear"></div>

with this CSS:

.clear {clear: both;}

This will get your gap to show in between.

Upvotes: 0

user1124378
user1124378

Reputation:

Clear the float:left and your margin will work

Upvotes: 0

kitti
kitti

Reputation: 14834

The a block is floating, which causes it to count as white space when b's margin is calculated. If you put the margin on the bottom of a instead it will work.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

There is no space because you're using float:left on "a".

Upvotes: 1

moribvndvs
moribvndvs

Reputation: 42497

On .a, you have declared float:left. That will cause it to flow over .b's margin. http://jsfiddle.net/nUNM6/1/

Upvotes: 3

Related Questions