html - 需要在内联元素之间插入空格

Question

我需要在多个 span 元素之间插入一个虚拟空间。 IE;需要在“Help”和“Feedback”之间插入一个空格

我该怎么做？

http://jsfiddle.net/hsQ24/

HTML

<div id="header">
    <span>Help</span>
    <span>   </span>
    <span>Feedback</span>
    <span>help</span>
</div>

CSS

#header{
    background-color:red;
}

Answer 1

给你的 span 元素左右 margin :

#header span {
    margin: 0 10px;
}

JSFiddle demo .

如果您只想在第一个和第二个 span 元素之间添加一个空格(忽略示例中的空元素)，您可以使用 :first-child 选择器仅将 margin-right 应用于第一个 span:

#header :first-child {
    margin-right: 20px;
}

JSFiddle demo .

或者，您可以修改您的 HTML，为您的第一个 span 元素提供一个 class，它可以用来代替 :first-child 选择器.