CSS：マージンのimg

Question

私はこのようなHTMLを持っている：

<div id="userBar"> 
<a href="notifications.php" class="iconGlobe"></A> 
<a href="cp.php" class="iconCP"></a> 
<a href="cap.php" class="iconCAP"></a> 
    </div> 

.iconGlobeはこのようになりますredstと同じアイコン、次のとおりです。間のマージンを与えるためにしようと

.iconGlobe{ 
background: url(../images/icons/globe_16x16.png) no-repeat; 
width: 16px; 
height: 16px; 
border: none; 
display:inline-block; 
position:relative; 
text-decoration:none; 
} 

イムアンカーリンク：

#userbar a{ 
margin-right: 8px; 
} 

しかし、私はマージンを適用しません。私はそれを無差別にやろうとしましたが、.iconGlobeの内側に余白があり、うまくいきました。私はそれらを無条件で適用しないことを望む。例

#userbar a{ 
    display: block; 
    float: left; 
    margin-right: 8px; 
} 

Answer 1

その問題：

Answer 2

はこれをみては？国会議事堂のBに注意し、CSSであなたは

#userbar a{

持っている - - 小文字のbは....あなたは余白のためのブロック要素を持っている必要があり

アン -

#userBar a{ display:block} 

Answer 3

あなたのhtmlにあなたは

<div id="userBar">を持っていますインライン要素にマージンを与えることはできません。

Answer 4

あなたのコードが正しい...

#userbar a{ 
display: inline-block; 
margin-right: 8px; 
} 

が、IEの古いバージョンがこれを無視するかもしれないことに注意してください：にあなたのコードを変更します。問題は#useBarとid = 'usebar'の大文字と小文字の不一致にすぎません。ケースが修正されたときに正しく動作します。ここをクリックしてください - http://jsfiddle.net/pGpwb/