我有4个DIV，我需要它们全部粘在一起。我和前两个DIV之间只有一个空格，我不知道为什么。有什么建议和可能的解释吗？我没有任何填充，这使得这很烦人。
@font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
background: #8C78B1;
height: 600px;
}
div.text1 {
padding-top: 100px;
color: white;
text-align: center;
font-size: 2.5em;
}
div.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover {
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body {
margin: 0;
font-family: FONT;
color: white;
}<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
答案 0 :(得分：3)
嵌套margin-top元素的默认p为collapsing vertically，它基本上会在父margin-top元素上创建相等的.surf2（这就是为什么你正在看空间。）
根据the spec，如果您建立新的块格式化上下文，则不会发生这种情况，这意味着一个选项是将overflow元素的.surf2设置为某个值除了默认值visible。将其更改为auto或hidden可以解决问题。
.surf2 {
background: #41c3ac;
height: 600px;
overflow: auto;
}
@font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
overflow: auto;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
background: #8C78B1;
height: 600px;
}
div.text1 {
padding-top: 100px;
color: white;
text-align: center;
font-size: 2.5em;
}
div.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover {
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body {
margin: 0;
font-family: FONT;
color: white;
}<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
这只是一个解决方法。有关折叠边距的特定规则，请参阅规范。您也可以简单地从p元素中删除边距。
答案 1 :(得分：1)
您需要将class="title1"边距设置为0px。 - ＆GT; margin: 0;
答案 2 :(得分：1)
对于您的所有surf#类别元素，请将其溢出设置为auto。
看来第二个div上的孩子的边距正在推动第一个div。
我建议为这些元素添加统一类或使用此规则：
[class^="surf"] {
overflow: auto;
}