仅使用CSS在HTML元素之间添加空间

仅使用CSS在HTML元素之间添加空间
内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用

我有几个相同的HTML元素一个接一个地运行：

<span>1</span>
<span>2</span>
<span>3</span>

我正在寻找在元素之间添加空间的最佳方法

[no space]  [1]  [space 10px]  [2]  [space 10px]  [3]  [no space]

PS：我不想使用任何额外的HTML标记，比如

<span></span>  <span></span>  <span class="last_span"></span>

提问于 2018-03-162018-03-16 05:07:59

用户回答回答于 2018-03-162018-03-16 13:45:31

这样做的好方法是：

span + span {
    margin-left: 10px;
}

每一个span前面都有span（所以，span除了第一个之外）都会有margin-left: 10px。

用户回答回答于 2018-03-162018-03-16 14:39:52

只需使用边距或填充。

在你的具体情况下，你margin:0 10px只能在第二使用<span>。

UPDATE

这是一个不错的CSS3解决方案（jsFiddle）：

span {
    margin: 0 10px;
}

span:first-of-type{
    margin-left: 0;
}

span:last-of-type{
    margin-right: 0;
}

云服务器限时特惠 1核2G首年99元起

精选中小企业最主流配置，适用于web应用场景、小程序及简单移动App，所有机型免费分配公网IP和50G高性能云硬盘（系统盘）。