保证金对无关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有影响

回答

相关问题