0
私のテンプレートは、デザイン上、間隔の追加のギャップ以外にはほとんど同じですが説明できません。ウェブサイトテンプレートを作成しています。 2つの別々のデザインの間隔は異なっていますが、同じでなければなりません
まずテンプレート、それは2つの部分に分割され、左側には、いくつかのテキストを持っており、それを右のボタンがあります。
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<nav>
<div id = "banner"> </div>
<div class="container_nav">
<a href="link" class="myButton">Something2</a>
</div>
</nav>
<h2 style="position: relative; top:80px"> Topicus</h2>
<div id = "b">
<div style="width: 100%;">
<div style="float:left; width: 50%; ">
<div style="position: relative; left: 15px; top:0px">
<p> Random Text </p>
</div>
</div>
<div style="float:left;">
<div style="position: relative; top: 15px; left:20px;">
<a href="link2">Sapien</a>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
第2のテンプレートでは、このテンプレートは縦横に分割されません。最初にテキストを入力してからボタンを押します。
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<nav>
<div id = "banner"> </div>
<div class="container_nav">
<a href="link" class="myButton">Something</a>
</div>
</nav>
<h2 style="position: relative; top:80px"> Venieie </h2>
<div id = "b">
<div style="position: relative; left: 15px;">
<p> Lorem ipsum dolor sit amet,
</div>
<div>
<a href="link2" class="button_class">this</a>
</div>
</div>
</body>
</html>
<h2>でページタイトルの後、各ページには、クラスBの<div>を持っています。 #bは、両方のドキュメントでまったく同じです。
#b {
top: 70px;
position: relative;
}
両方の設計では、タイトルからテキストブロックを分離する唯一のものは、#bスペーサー/除数ですが表示された距離は、これらのテンプレートの両方のために異なっています。私はそれが何であるかを考えていないので、top:の2つの異なる値を使って修正することができますが、明らかにこれは正しい方法ではありません。
「float」について考えてみてください。それが原因です！ –
これは[マージンの崩壊]（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing）によるものです。浮遊要素を持たないテンプレートは、マージンを小さくします（スペースは少なくなります）。 –