divを右下に作成

Question

divをコピー＆ペーストすると、コピーしたdivの直下に貼り付けられたdivが表示されるようにしています。ここに私のコードは次のとおりです。

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

<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>

これは、それが今のようになります。

私はそのように.friendのdivの間の間隔を小さくしようとしていますそれらは垂直方向に互いに接近している。彼らは同じクラスを持っていなければなりません。

Answer 1

あなたが望むすべてが各friend要素間の「ダイナミック」1pxギャップを言う与えることであれば、CSSの下に追加することが

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

を行います。これは、すべてに1pxのの下の余白を追加します.friend要素最後の部分を除く。パスタをコピーしても、自動的にスペースが表示されます。

Answer 2

要素を検査して、どの要素に余白または余白があるかを確認してください。 H5要素に起因する可能性が最も高い