私は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ピクセル。どうして?
このような些細な質問に申し訳ありませんが、わかりませんでした。
それぞれのdivの後に50pxのスペースが50pxあり、left-childプロパティを使用して最後のdivに50pxがないことを確認できます。しかし、私の質問は、マージンはなぜ組み合わされているのでしょうか? – Tarun
このリンクを確認してください。 http://stackoverflow.com/questions/3906640/css-margins-overlap-problem – imez