css - 上下の余白が崩れるのを修正するには？

Question

私はCSSが初めてで、次の行が上下のマージンで機能しない問題を修正する方法を理解しようとしています。ただし、サイドマージンに対しては問題なく機能します。

.contents {
    ...
    margin: 10px 10px 10px 10px;
}

これを修正するにはどうすればよいですか?

編集：

代わりにコンテナをパディングしようとしましたが、コンテナが最大サイズに拡張されました（なぜですか？）：

.container {
    ...
    padding: 10px 10px 10px 10px;
}

score 10 · Accepted Answer

overflow:auto崩壊に関係する要素のいずれかで使用します。例えば：

article {
    overflow:auto;
}

score 4 · Accepted Answer

この回答は、提供したフィドルに基づいています。

article親divタグ内のスペースにマージンを適用するという点で、あなたのアプローチは間違っていると思います。この場合、コンテンツを外側の境界線から分離しようとしているため、パディングを使用することをお勧めします。だから適用：

article {
  //display: block;
  clear: both;
  padding: 10px;
}

これにより、articleタグのサイズが大きくなりますが、コンテナdiv要素の境界が接触します。要素間にスペースを作成するには、 amarginが適用されます。

.rounded-box {
  background-color: #959392;
  border-radius: 15px;
  margin: 10px 0px;
}

作業例 http://jsfiddle.net/LCTeU/4/

要約すると、2 つの要素の間にスペースを作成する場合は、を使用しますmargin。要素とその境界線の間にスペースを作成したい (または要素を空白で囲みたい) 場合は、を使用しますpadding。

4 に答える 4