两个DIV元素之间的垂直空白间隔

Question

两个DIV元素之间的垂直空白间隔

3

我有四个 DIV，需要它们紧密地粘在一起。但是我发现第一个和第二个 DIV 之间会有白色空隙，而且我不知道原因。请问你有什么建议和解释吗？我没有设置任何 padding，这让我很困扰。

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

- Isengardium

在你的div.surf1上，margin-bottom: -40px;是一个去除它的选项。 - Chris G

3个回答

2

针对所有使用了 surf# 类的元素，将它们的溢出设置为 auto。

看起来第二个 div 子元素的外边距将第一个 div 推上去了。

我建议要么给这些元素添加一个统一的类名，要么使用以下规则：

[class^="surf"] {
  overflow: auto;
}

- arjabbar

非常感谢您的回答，以及对那个网站的引用。它确实帮了我很多。但现在，使用overflow: auto的解决方案，是不是像有人在这里说的那样，使用margin: 0更好呢？这是不是就像你正在修复问题，而margin: 0则是消除问题？作为初学者，我想知道这个。 - Isengardium

1

说实话，我并没有看到任何优势。或者至少现在我还没有看到。这取决于您希望那些冲浪div中的其余内容如何流动。您可能实际上希望每个项目上下都有边距。也许不是，也许应该是填充。这完全取决于您。随着页面样式的扩展，事情会变得更加清晰。 - arjabbar

1

您需要将 class="title1" 的边距设置为 0 像素。 -> margin: 0;

- herrh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

嵌套的 p 元素的默认 margin-top 是在垂直方向上折叠, 这实际上会在父元素 .surf2 上创建一个相等的 margin-top（这就是为什么您看到空格的原因）。

根据规范，如果您建立了新的块格式化上下文，则不会发生这种情况，这意味着一种选择是将 .surf2 元素的 overflow 设置为除默认值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元素中简单地移除边距。