無関係なdivに影響を及ぼすマージン

私はここで壁に当たっています...無関係なdivに影響を及ぼすマージン

私はそのページに集中したいタイトルがあります。私は#landingAreaContent {position: relative; margin: auto; text-align: center; background-color: blue;を使ってこれをしました。

タイトルは、フルスクリーンのdivの中に座っているdivにラップされています。

タイトルの下限を上げるために、タイトルのdivの余白を増やしたかったのです。シンプル、はい？

タイトルを含むdivのスタイルにmargin: 50pxを追加する以外は、フルスクリーンのdivが下に移動します。

もっと厄介なことに、私がページの下にあるdivで同じことをしようとすると、すべて正常に動作します。

どうしてですか？コンテキストについては、コードとスクリーンショットを参照してください。

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
#landingArea { 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t background-color: #6fc9ff; 
 
} 
 

 
#landingAreaContent { 
 
\t position: relative; 
 
\t margin: auto; 
 
\t text-align: center; 
 
\t background-color: blue; 
 

 
}#belowFold { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background-color: white; 
 
} 
 

 
#belowFoldContent { 
 
\t position: relative; 
 
    margin: auto; 
 
    margin-top: 50px; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t font-family: 'Dancing Script', cursive; 
 
\t font-size: 60px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Becky's Pet Services</title> 
 
\t <link rel="stylesheet" type="text/css" href="bps2CSS.css"> 
 
\t <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Raleway" rel="stylesheet"> 
 
</head> 
 
<body> 
 

 
<div id="landingArea"> 
 
\t <div id="landingAreaContent"> 
 
\t \t <img id="langingAreaLogo" src=""> 
 
\t \t <h1>Becky's Pet Services</h1> 
 
\t </div> 
 
</div> 
 

 
<div id="belowFold"> 
 
\t <div id="belowFoldContent"> 
 
\t \t <h1>Welcome!</h1> 
 
\t \t <p>This is an example of a title and some text that would be filled with a short, meaningful blurb about the company and available services.</p> 
 
</div> 
 

 

 
</body> 
 
</html>

P.S.鮮やかな色はdivの可視性のためだけにあります。：D

出典

2016-08-17 Tom Jardine-Smith

あなたはいくつかのケースで子供たち（あるいはその子どものマージン）を含むように親要素を強制する必要があります。

#landingArea { 
    ... 
    overflow: hidden; /* or auto */ 
}

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#landingArea { 
 
    height: 100vh; 
 
    overflow: hidden; 
 
    background-color: #6fc9ff; 
 
} 
 

 
#landingAreaContent { 
 
    position: relative; 
 
    margin: auto; 
 
    text-align: center; 
 
    background-color: blue; 
 
    margin-top: 50px; 
 
} 
 

 
#belowFold { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: white; 
 
} 
 

 
#belowFoldContent { 
 
    position: relative; 
 
    margin: auto; 
 
    margin-top: 50px; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'Dancing Script', cursive; 
 
    font-size: 60px; 
 
}

<div id="landingArea"> 
 
    <div id="landingAreaContent"> 
 
     <img id="langingAreaLogo" src=""> 
 
     <h1>Becky's Pet Services</h1> 
 
    </div> 
 
</div> 
 

 
<div id="belowFold"> 
 
    <div id="belowFoldContent"> 
 
     <h1>Welcome!</h1> 
 
     <p>This is an example of a title and some text that would be filled with a short, meaningful blurb about the company and available services.</p> 
 
    </div>

出典

2016-08-17 20:29:12 isherwood

どういたしまして。ありがとうございましたコメントは貴重なものとはみなされませんが、ネットワークが乱雑になります。感謝の気持ちを表明するために投票と承認を使用してください。 – isherwood

無関係なdivに影響を及ぼすマージン

答えて

関連する問題