html - CSS 白间距问题

Question

如何删除在 website.com 上找到的 div 元素下方的空白，就像 730 像素的空白一样。我已经摆弄我的 CSS 代码一个多小时了。我似乎无法隔离问题

HTML:

<div class="element">
<img src="imagesrc">
<div id="Projecttitle" class="Projecttitle">Title goes here</div>
<div id="Projectdescription" class="Projectdescription">Project description goes here</div>
</div>

<div class="element">
<img src="imagesrc">
<div id="Projecttitle" class="Projecttitle">Title goes here</div>
<div id="Projectdescription" class="Projectdescription">Project description goes here</div>
</div>

CSS:

div.element img:nth-of-type(1){
    padding-top:80px;
}
div.element div:not(:nth-of-type(1)){
    position:relative;
    width:auto;
    height:auto;
    bottom:375px;


}

div.element img{
    position:relative;
    right:198px;
    padding-right:56px;
    border:none;

}
.Projecttitle{
    text-transform:none;
color:#000;
text-align:left;
letter-spacing:.3px;
font:normal 22px QuaverSans;
margin-left:auto;
margin-right:auto;
overflow:visible;
z-index:0;
vertical-align:middle;
padding-top:15px;

}
#Projecttitle{
    position:relative;
    bottom:162px;
    width:410px;
    height:155px;
    left:226px;
}
.Projectdescription{
    text-transform:none;
color:#000;
text-align:left;
letter-spacing:.3px;
font:normal 17px QuaverSans;
margin-left:auto;
margin-right:auto;
overflow:visible;
z-index:0;
vertical-align:middle;


}
#Projectdescription{
    position:relative;
    bottom:290px;
    width:410px;
    height:155px;
    left:226px;
    z-index:0;
}

Answer 1

首先，您有一个未闭合的 div 标记。第二个 div.element 嵌套在第一个里面，显然它们应该是 sibling 。当你解决这个问题时，问题会变得更加明显。您还使用了过多的相对定位。这使问题更加困惑，因为元素在屏幕上的外观发生了变化，但它在文档流中“占据”的空间却没有。