CSSマージン

外マージから

合わせマージンが発生する可能性があり場合、外部からの垂直マージン定義ブロック要素を使用します。

合成のブロック要素は、隣接する垂直のマージン

場合上記の要素は、それらの間のマージン下マージントップよりも垂直方向の間隔を、下余白マージン底を有する外縁トップから、下記の要素を有する場合、2つの垂直方向に隣接するブロック要素が、会います合計が、二つの大きな。この現象は、垂直のマージン（また、余白を崩壊と呼ばれる）を組み合わせた隣接ブロック要素と呼ばれています。

解決策：うまく避けるために世話をします

垂直マージンマージのネストされたブロック要素

2つのブロック要素、そうでない場合、親要素と上部フレームパディング、サブ要素との距離は、親要素からの合併の外装ケースの外側になりますのネストされた関係のため、両者の複合距離外比較的大きな、でも0に外から親要素ならば、合併が発生します。垂直方向のみに発生する、横方向には影響されません。

ケース：

HTML

<div class="father">
  <div class="son"></div>
</div>

CSS

.father{
  width: 300px;
  height:300px;
  background-color: red;
}
.son{
  width:100px;
  height:100px;
  background-color: blue;
}

この場合には場合sonでも、親要素、余白になります提供されるfather「部分的に」一緒に

ソリューション：

• 親要素の境界上の一つの画素又はパディングを定義することができ

.father{
  width: 300px;
  height:300px;
  background-color: red;
  padding-top: 1px;
  border-top: 1px solid red;

}
.son{
  width:100px;
  height:100px;
  background-color: blue;
}

欠点は、ボックスのサイズを大きくすることです

• あなたは親要素を追加することができます overflow:hidden