Question

我有一个父div元素，其中包含多个span元素。 span元素将换行到div元素内的新行。但我想在第一行和第二行的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

将display:inline-block;设为span，因为span标签是内联元素边距不会影响它。

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>

如何在div标签内部包含的span元素之间添加间距？

1 个答案: