Question

我玩CSS已经有几年了。说实话，我也不是那么擅长。我下面有我的代码（或单击here）。基本上，在red-div（.three）的底部和顶部有一个额外的间隙/空隙。

我该如何消除这一差距？这样padding / margin / space为0。

.one {
  background-color: yellow;
  width: 50vw;
  height: 90vh;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}
.two {
  background-color: lightblue;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.three {
  background-color: red;
  width: auto;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
}
.four {
  background-color: green;
  width: 50px;
  height: 50px;
  right: 3%;
  bottom: 1%;
  position: absolute;
}

<div class="one">
<div class="four">
</div>
<div class="two">
<div class="three">
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
</div>
</div>
</div>

我将添加一张图片，以便您可以看到它。蓝线在哪里。应该没有空间。 Image

Answer 1

在其中包含p标签，以添加可用于删除空间的空间

.three:first-child {
  padding-top: 0;
}
.three:last-child {
 padding-bottom: 0;
}

Answer 2

您可以使用选择器nth-child（）来减少p标签中的边距

.one {
  background-color: yellow;
  width: 50vw;
  height: 90vh;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}
.two {
  background-color: lightblue;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.three {
  background-color: red;
  width: auto;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
}
.four {
  background-color: green;
  width: 50px;
  height: 50px;
  right: 3%;
  bottom: 1%;
  position: absolute;
}
:nth-child(1){
padding-top: 0px;
margin-top: 0px;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div class="one">
<div class="four">
</div>
<div class="two">
<div class="three">
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
<p>This is some text in a div element.</p>
</div>
</div>
</div>
</body>
</html>

Answer 3

尝试一下

.three p:first-child { margin: 0; }

.three p:last-child { margin: 0; }

CSS div顶部和底部增加了空白空间

3 个答案: