1
私はここで壁に当たっています...無関係な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
どういたしまして。ありがとうございましたコメントは貴重なものとはみなされませんが、ネットワークが乱雑になります。感謝の気持ちを表明するために投票と承認を使用してください。 – isherwood