HTML/CSSと特定の要素からのマージンの動作に関する基本的な質問があります。
私の主張を明確にするために、私はこのフィドルを作成しました：http: //jsfiddle.net/5VA5h/
ほら、私はある種の「リセット」を適用し、すべてにいくつかのスタイルを追加しましたh1。
最初の例では、marginfromh1はボックスの外側に適用されますが、#cがh1設定されdisplay: inline;ている場合は、ボックスの内側に適用されます。
なんでそうなの？
最初の例では、<h1>をブロック要素として使用すると、上部マージンが折りたたまれています（私の強調）。
CSSでは、2つ以上のボックス（兄弟である場合とそうでない場合があります）の隣接する余白を組み合わせて、単一の余白を形成できます。このように結合されたマージンは崩壊すると言われ、結果として生じる結合されたマージンは崩壊されたマージンと呼ばれます。
...以降：
次の場合に限り、2つのマージンが隣接しています。
- どちらも、同じブロックフォーマットコンテキストに参加するインフローブロックレベルボックスに属しています
- ラインボックス、クリアランス、パディング、境界線はありません（特定のゼロハイトラインボックス（9.4.2を参照）は、この目的では無視されることに注意してください）。
- 両方とも垂直に隣接するボックスエッジに属します。つまり、次のペアのいずれかを形成します。
- ボックスの上部マージンと最初の流入子の上部マージン
- ボックスの下マージンと兄弟に続く次の流入の上部マージン
- 最後の流入子の下部マージンと、親が「自動」で計算された高さを持っている場合はその親の下部マージン
- 新しいブロックフォーマットコンテキストを確立せず、計算された「min-height」がゼロ、「auto」が計算された「height」がゼロで、流入する子がないボックスの上下の余白
2番目の例では、<h1>をインライン要素として使用すると、垂直方向の余白は有効になりません。
'margin'省略形プロパティは、4つの辺すべてのマージンを設定しますが、他のマージンプロパティはそれぞれの辺のみを設定します。これらのプロパティはすべての要素に適用されますが、垂直方向の余白は、置換されていないインライン要素には影響しません。
インライン要素の上下の余白は重要ではありません。インライン要素では、各要素はテキスト内の単語を表します。
Margin-TopおよびMargin-Bottomは、display：inlineの要素では使用されません。参照：インライン要素のマージントップ