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

我有一个父div元素与多个span元素，因为它的孩子。 span元素正在包装到div元素内的新行。但我试图在第一行和第二行之间添加一些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>

来源

2017-02-14 n179911

（我假设你在为你的代码插入正确的问题typo'ed了'保证金bttom'）。但是，给你的'span'元素'display：inline-block;'并且margin应该开始工作。 PS。如果这是在html电子邮件模板中使用的，建议使用非简写的css属性（即不要使用'margin'使用'margin-XXXX'的4个版本） – haxxxton

给display:inline-block;跨度，因为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>

来源

2017-02-14 05:39:43

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

回答

相关问题