2011-01-08 18 views
1

私は3年間ウェブサイトを開発していましたが、今日は理解できないものが見つかりました。私が働いているコードは:クラスBOXを持つ2つのdiv要素は、同じ余白空間を共有している理由 http://pastie.org/1439629HTML/CSSマージンの問題

<!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> 

今問題がある、私が把握傾けます。つまり、Yの下の余白はXの上の余白と同じです。50pxの代わりに2つの間に100pixelのスペースがあってはなりませんか?

編集: 私は

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

にCSSを編集する場合、2つの間の距離はまだは50pxこと、ないはずです!今100ピクセル。どうして?

このような些細な質問に申し訳ありませんが、わかりませんでした。

答えて

1

div yの下から50pxの余白の後に、div xの余白を確認して、それが50pxだと思います。再び上から50ピクセルの余白を取る必要はありません。

+0

それぞれのdivの後に50pxのスペースが50pxあり、left-childプロパティを使用して最後のdivに50pxがないことを確認できます。しかし、私の質問は、マージンはなぜ組み合わされているのでしょうか? – Tarun

+0

このリンクを確認してください。 http://stackoverflow.com/questions/3906640/css-margins-overlap-problem – imez

関連する問題