我玩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
答案 0 :(得分:1)
在其中包含p标签,以添加可用于删除空间的空间
.three:first-child {
padding-top: 0;
}
.three:last-child {
padding-bottom: 0;
}
答案 1 :(得分:0)
您可以使用选择器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>
答案 2 :(得分:0)
尝试一下
.three p:first-child { margin: 0; }
.three p:last-child { margin: 0; }