Question

我在这里碰壁了......

我有一个标题，我想在页面上集中对齐。我使用#landingAreaContent {position: relative; margin: auto; text-align: center; background-color: blue;完成了这项工作。

标题包含在一个div中，而div又坐在一个全屏div中。

然后我想增加标题div的上边距以降低标题。很简单，是吗？

除非我将margin: 50px添加到包含标题的div的样式中，否则全屏div会随之向下移动。

更令人讨厌的是，当我尝试使用div进一步向页面做同样的事情时，一切正常。

为什么会这样？有关上下文，请参阅代码和屏幕截图。

body {
	margin: 0;
	padding: 0;
}

#landingArea {
	width: 100vw;
	height: 100vh;
	background-color: #6fc9ff;
}

#landingAreaContent {
	position: relative;
	margin: auto;
	text-align: center;
	background-color: blue;

}#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;
}

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

P.S。花哨的颜色只有div的可见性。：d

Answer 1

在某些情况下，你必须强制父元素包含他们的孩子（或他们孩子的边距）：

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

保证金对不相关的div有影响

1 个答案: