让div正好在彼此之下

Question

我正在努力使它如果我复制并粘贴一个div，粘贴的div就会出现在我复制的那个下面。这是我的代码：

＆＃13;

＆＃13;

.friend {
  position: relative;
  text-decoration: none;
}

＆＃13;

<a class="friend" href="#1">
  <div class="user-status" id="friend-status"></div>
  <img id="friend-profile-picture" src="images/talk/blank-profile-picture.png">
  <h5 id="friend-name">Jane Doe</h5>
</a>
<a class="friend" href="#2">
  <div class="user-status" id="friend-status"></div>
  <img id="friend-profile-picture" src="images/talk/blank-profile-picture.png">
  <h5 id="friend-name">Jane Doe</h5>
</a>
<a class="friend" href="#3">
  <div class="user-status" id="friend-status"></div>
  <img id="friend-profile-picture" src="images/talk/blank-profile-picture.png">
  <h5 id="friend-name">Jane Doe</h5>
</a>

＆＃13;

＆＃13;

＆＃13;

这就是现在的样子：

我试图使.friend div之间的间距变小，使它们在垂直方向上更接近。他们必须有同一个班级。

Answer 1

尝试检查元素并查看哪个元素具有填充或边距。很可能是由H5元素引起的。

Answer 2

如果你想要的只是说一个＆＃34;动态＆＃34;每个1px元素之间存在friend个差距，然后添加以下CSS即可

.friend:not(:last-of-type) {
  margin-bottom: 1px;
}

  

这将为所有.friend元素添加1px的下限，除了最后一个。因此，即使您复制面食元素，也会自动显示间距。