Divがページにプッシュダウンされる理由

私は "文字"と "h1"を含む "ジャンプトロン"と呼ばれる中央の大きな部分をスタイルしようとしています。中央区域の「文字」または「h1」を垂直に低く押さえようとすると、背景画像とともに「ジャンプトロン」全体が移動します。なぜそれが起こるのですか？なぜ "手紙"は "ジャンプトロン"の子であるので、 "ジャンプトロン"内のマージンを動かさなければならないのはなぜですか？また、私が使用したものから "ジャンプトロン"の大きな画像の背景を作成するより良い方法がありますか？Divがページにプッシュダウンされる理由

<body> 
<header> 
    <div class="container"> 
    <h2>Trunk Club</h2> 
    <nav> 
     <ul> 
     <li>How it Works</li> 
     <li>What to Expect</li> 
     <li>Stylists</li> 
     <li>Log In</li> 
     <li><a id="getstarted" href="#">Get Started</a></li> 
     </ul> 
    </nav> 
    </div> 
</header> 
<div id="jumpotron"> 
    <div id="letters"> 
    <h1>Premium Clothing,<br> 
     Great Advice,<br> 
     Zero Work</h1> 
    </div> 
</div> 
</body> 
</html> 


@charset "utf-8"; 
/* CSS Document */ 
body { 
    font-family: 'Source Sans Pro', sans-serif; 
} 

.container { 
    width: 80%; 
    margin: 0 auto; 
} 

header { 
    width: 100%; 
    min-width: 800px; 
    height: 60px; 
    background-color: #151e28; 
    text-transform: uppercase; 
} 

header h2 { 
    color: #FFFFFF; 
    float: left; 
    margin-top: 15px; 
} 

nav { 
    float: right; 
    margin-top: 5px 
} 

nav li { 
    float: left; 
    list-style: none; 
    color: #878b85; 
    margin-left: 20px; 
    font-size: 12px; 
    font-weight: bold; 

} 

nav ul li:nth-child(4) { 
    border-left: 1px solid #878b85; 
    padding-left: 15px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    margin-top: -5px; 
} 

nav ul li:nth-child(5) { 
    border: 1px solid #878b85; 
    padding-right: 20px; 
    padding-left: 20px; 
    padding-top: 5px; 
    padding-bottom: 7px; 
    margin-top: -5px; 
} 

#getstarted { 
    text-decoration: none; 
    color: #878b85; 
} 

#getstarted:visited { 
    color: #878b85; 
} 


#jumpotron { 
    width: 100%; 
    min-height: 670px; 
    background-image: url(images/Stylist_Product_Exp30-v3.jpg); 
    background-position: center; 
    background-size: 100% auto; 
} 

#letters { 
    margin-top: 500px; 
} 

#jumpotron h1 { 
    color: #FFFFFF; 
    text-align: center; 
    font-size: 55px; 
}

出典

2016-03-22 George Kech

あなたは、500に#lettersにない余裕

出典

2016-03-22 16:20:01 Birdman

しかし、なぜにパディングを設定する必要があります。

ここでは、コードですか？私の目標は理解することです。バックグラウンド画像が#lettersやh1と一緒に動くのはなぜですか？バックグラウンド画像が「ジャンプトロン」に適用されているため、理解できません。 –

CSSボックスのモデルを読んでください。マージンはエレメントの境界線の外側のスペースで、パディングは境界内のエリアです。 CSSボックスモデルhttp://www.w3schools.com/css/css_boxmodel.aspのリンクがあります – Birdman

Divがページにプッシュダウンされる理由

答えて

関連する問題