子コンテナが親に影響するのはなぜですか

this単純なトリビュートページを作成しました。コンテナをテキストコンテンツ（私はそれのためのクラスを作成しました：.main-content）で少し下にして、margin-top: 130pxで少し上にしたいので、ページの最上部に貼り付けられませんでした。子コンテナが親に影響するのはなぜですか

<body> <!-- applied background-image here --> 
    <div class="darken"> <!-- dark overlay on the background image --> 
    <div class="container-fluid"> 
     <div class="container main-content"> <!-- .main-content - has margin-top: 130px; applied --> 
     <div class="row"> 
      <div class="col-lg-offset-2 col-lg-10"> <!-- Bootstrap centering --> 
      <h1 class="display-1">St. Pope John Paul II</h1> <!-- just another text below... --> 
      <h2 class="display-4">Pope of the family</h2> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-....... <!-- rest of the text -->

しかし - 奇妙なことが起こった -

.main-content { 
margin-top: 130px; 
}

マージンがは、このように、最終的に（margin-topへの適用）のdivに影響を与える（...クロームデベロッパーツールに応じて）体に影響を与えているようです.darkenクラス！どのように私は達成することができます私のテキストは.darkenクラスは、完全なビューポート

に適用されたページ

の先頭からのオフセットた

：

は、私は2つのことを達成したいですこの？

CodePen link

出典

2016-04-09 Selrond

の可能性のある重複（http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element）[子要素のマージンは、親要素を移動] – Aziz

これを試してください：

代わりのマージンを使用パディングを。

.main-content { 
    padding-top: 130px; 
}

出典

2016-04-09 17:00:10 satya

それは動作しますDAMN理由???あなたが@satyaできる場合はそれを説明してください – Selrond

@Azizありがとう！私は彼らを完全に忘れていました... -_-今度は、どちらの要素がマージンを崩していたのか教えてください。 – Selrond

「body」タグまでのすべての「.main-content」親でマージンが崩れました。[CSS2 spec]（https://www.w3.org/TR/CSS2/box.html#collapsing - マージン）： "*ラインボックスなし、クリアランスなし、パディングなし、ボーダーを区切りません*"。 – Aziz

子コンテナが親に影響するのはなぜですか

答えて

関連する問題