保證金對無關div有影響

我在這裏遇到了一堵牆......保證金對無關div有影響

我有一個標題，我想在頁面上集中對齊。我通過使用#landingAreaContent {position: relative; margin: auto; text-align: center; background-color: blue;來完成此操作。

標題被封裝在一個div中，而div又被放在一個全屏div內。

然後，我想增加標題div的頂部邊距，以減少標題。很簡單，是嗎？

除了當我將margin: 50px添加到包含標題的div的樣式中時，全屏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>

附：花哨的顏色只在那裏才能看到divs。：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有影響

回答

相關問題