divタグの内側に折り返されたスパン要素間にスペースを追加するにはどうすればよいですか？

Question

私は子供のように複数のspan要素を持つ親div要素を持っています。 span要素は、div要素内の新しい行に折り返されています。しかし、私は最初の行と2行目にあるspanの間にいくつかの垂直スペーシングを追加しようとしています。 私は

margin-bottom: 4px;

と

margin: 4px 0px 4px 0px;

としてマージンを追加しようとしているが、どちらのオプションが動作します。

<div style="width: 200px;"> 
    <span style="border:2px solid red; margin-bottom:4px;"> text 1 </span> 
    <span style="border:2px solid red; margin-bottom:4px;"> text 2 </span> 
    <span style="border:2px solid red; margin-bottom:4px;"> text 888888 888888 888 888 8 8888 8 8 888 888 8888 888 88888 8888 888 8888 8888 8888 </span> 
    <span style="border:2px solid red; margin-bottom:4px;"> text 4 </span> 
    <span style="border:2px solid red; margin-bottom:4px;"> text5 </span> 
    <span style="border:2px solid red; margin-bottom:4px;"> text 6 </span> 
    <span style="border:2px solid red; margin-bottom:4px;"> text 7 </span> 
    <span style="border:2px solid red; margin-bottom:4px;"> text 9 </span> 
    <span style="border:2px solid red; margin-bottom:4px;"> text 10 </span> 
    <span style="border:2px solid red; margin-bottom:4px;"> text 11 </span> 
    <span style="border:2px solid red; margin-bottom:4px;"> text 12 </span> 
    <span style="border:2px solid red; margin-bottom:4px;"> text 18 </span> 
    <span style="border:2px solid red; margin-bottom:4px;"> text 14 </span> 
    <span style="border:2px solid red; margin-bottom:4px;"> text15 </span> 
    <span style="border:2px solid red; margin-bottom:4px;"> text 16 </span> 
    <span style="border:2px solid red; margin-bottom:4px;"> text 17 </span> 
</div> 

Answer 1

spanタグがそれに影響を与えないインライン要素のマージンがあるとして、またがるようにdisplay:inline-block;を与えます。

span { 
 
    display: inline-block; 
 
    border: 2px solid red; 
 
    margin: 4px; 
 
}

<div style="width: 200px;"> 
 
    <span> text 1 </span> 
 
    <span> text 2 </span> 
 
    <span> text 888888 888888 888 888 8 8888 8 8 888 888 8888 888 88888 8888 888 8888 8888 8888 </span> 
 
    <span>text 4</span> 
 
    <span> text5 </span> 
 
    <span> text 6 </span> 
 
    <span> text 7 </span> 
 
    <span> text 9 </span> 
 
    <span> text 10 </span> 
 
    <span>text 11</span> 
 
    <span> text 12 </span> 
 
    <span> text 18 </span> 
 
    <span> text 14 </span> 
 
    <span> text15 </span> 
 
    <span> text 16 </span> 
 
    <span> text 17 </span> 
 
</div>