css - div内のスペース要素

Question

同じ行に 3 つの画像を配置し、右に浮かせ、それぞれの間にマージンを持たせたいと考えています。次のコードを使用する場合:

<div style="float:right">
    <img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40">
    <img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40">
    <img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40">
</div>

私の画像は同じ行にありますが、それぞれの間にマージンを設定する方法がわかりません。

各画像を次のような独自の div に配置すると:

<div style="float:right">
    <div style:"margin-left:10"><img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"></div>
    <div style:"margin-left:10"><img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"></div>
    <div style:"margin-left:10"><img src="http://relevance.com/wp-content/uploads/2013/05/youtube-logo.jpg" width="40"></div>
</div>

その後、余白を設定できますが、画像が同じ行に表示されなくなり、すべて右に浮いて 1 列になってしまいます。

これを行う適切な方法は何ですか？

Answer 1

目的の div ID に対して、css で column-gap プロパティを使用するだけです。

.container {

    column-gap: 20px;

}