Need to insert space between inline elements

I need to insert a dummy space between multiple span elements. ie; Need to insert a space between "Help" and "Feedback"

How can I do that?

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;
}

---

you can use :before pseudo element as well. Check the DEMO .

CSS like

span:before{
    content:" "; 
    display:inline-block; 
    width:32px;
}

HTML Code

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

In Addition if need to remove unnecessary span you can use :nth-of-type

#header span:nth-of-type(2)
{
  display:none;
  background-color:green;
}

Another JSBin link.

---

Give your span elements left and right margin :

#header span {
    margin: 0 10px;
}

JSFiddle demo .

If you're wanting to only add a space between the first and second span elements (ignoring the empty one in your example), you can make use of the :first-child selector to apply margin-right to the first span only:

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

JSFiddle demo .

Alternatively you can modify your HTML to give your first span element a class which can be used instead of the :first-child selector.

---

Use regular spaces or  

http://jsfiddle.net/Quadraxas/hsQ24/5/

链接地址: http://www.djcxy.com/p/15790.html

上一篇: 删除div块之间的空白区域

下一篇: 需要在内联元素之间插入空格