Question

所以我有这个div我希望样式包含其他列出一个在另一个上面的div但是当我尝试设置其中一个div时，在每个div之前添加一些间距，尽管填充和边距都在0

这是html和css：

.result{
  width:40%;
  height:55%;
  background: rgba(0,0,0,0.9);
  float: right;
  margin: 0;
  margin-right: 10%;
  padding: 0;
  /*display: none;*/
}
.res{
  width:100%;
  margin:0;
  padding: 0;
  height: 25%;
  border-bottom: 2px solid #f4f4f4;
  color: #fff;
  text-align: center;
}

<div class="result">
<div class="res">
  <h4>something</h4>
  <span>something</span>
  <span>something</span>
</div>
<div class="res">
  <h4>something</h4>
  <span>something</span>
  <span>something</span>
</div>
</div>

Answer 1

您可以使用first-child仅将CSS应用于第一个div。或者您也可以使用last-child。

＆＃13;

.result {
  width: 40%;
  height: 55%;
  background: rgba(0, 0, 0, 0.9);
  float: right;
  margin: 0;
  margin-right: 10%;
  padding: 0;
  /*display: none;*/
}

.result .res:first-child {
  width: 100%;
  margin: 0;
  padding: 0;
  height: 25%;
  border-bottom: 2px solid #f4f4f4;
  color: #fff;
  text-align: center;
}

＆＃13;

<div class="result">
  <div class="res">
    <h4>something</h4>
    <span>something</span>
    <span>something</span>
  </div>
  <div class="res">
    <h4>something</h4>
    <span>something</span>
    <span>something</span>
  </div>
</div>

＆＃13;

Answer 2

你的逻辑存在问题

您会在.res个容器（每个div之前的空格）空间之间看到不需要的空格。右???

这不是空格，您已在res容器中应用了border-bottom: 2px solid #f4f4f4;。消除这一行，它应该按预期工作。这是小提琴。

<强>说明：在这种情况下，border-bottom感觉就像空间一样。因此，如果我们消除这种情况，我们会让两个容器感觉合并。

html div元素中不需要的空格

2 个答案: