CODEWITHSUNDEEP
htmlcssmargin
Tarun
Tarun

Reputation: 5544

HTML/CSS Margin issue

I've been developing websites for 3 years now and today found something which I couldn't understand. The code I am working with: http://pastie.org/1439629

<!DOCTYPE html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <title>Page Title</title>
 <style type="text/css" media="screen">
  .box{
   margin:50px 0;
   background:red;
   border:1px solid black;
  }
 </style>
</head>
<body>
 <div class="box">
  Y
 </div>

 <div class="box">
  X
 </div>
</body>

Now the issue is, I cant figure out why the two Divs with the class BOX are sharing the same margin space. i.e. the bottom margin on Y is same as top margin of X. Shouldn't there be 100pixel space between the two instead of 50px?

Edit: If i edit CSS to

.box{
    margin:50px;
    background:red;
    border:1px solid black;
    float:left;
    height:50px;
    width:50px;
}

then the distance between the two should still be 50px, but no! now its 100pixel. Why?

Sorry for such a trivial question but i couldn't figure out.

Upvotes: 1

Views: 231

Answers (2)

imez
imez

Reputation: 308

i think after 50px margin from bottom for div y , div x check margin top and it is 50px. then no need to margin 50 px from top again.

Upvotes: 1

Steven K.
Steven K.

Reputation: 2106

That behaviour is part of the html standard. see: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Upvotes: 5

Related Questions