css圖像建設與精靈

Question

我想創建一個動態圖標使用css精靈。這裏就是我不斷收到：

所以我其實有什麼地方出了錯幾個問題：

1. 爲什麼圖標（跨框）不重疊的紫色盒子？
2. 爲什麼紫色的盒子之間有2px的空間？

編輯

這裏是一個的jsfiddle：http://jsfiddle.net/hWhUb/

這裏的初步認識CSS我正在使用：

.icon { 
    position: relative; 
    width: 87px; 
} 

.icon .icon-type { 
    position: absolute; 
    left: 0; 
} 

.icon .brigade, .icon .icon-type { 
    background-image: url('img/play/splitbrigades.png'); 
} 

.icon-hero { 
    width: 87px; 
    height: 71px; 
    background-position: -11px -11px; 
    background-repeat: no-repeat; 
} 

.brigade-purple-left { 
    width: 27px; 
    height: 71px; 
    background-position: -287px -12px; 
    display: inline-block; 
    background-repeat: no-repeat; 
} 

.brigade-purple-middle { 
    width: 30px; 
    height: 71px; 
    background-position: -334px -12px; 
    display: inline-block; 
    background-repeat: no-repeat; 
} 

.brigade-purple-right { 
    width: 28px; 
    height: 71px; 
    background-position: -384px -12px; 
    display: inline-block; 
    background-repeat: no-repeat; 
} 

和HTML：

<div class="icon"> 
    <div class="brigade brigade-purple-left">&nbsp;</div> 
    <div class="brigade brigade-purple-middle" style="width: 22px;">&nbsp;</div> 
    <div class="brigade brigade-purple-right">&nbsp;</div> 
    <div class="icon-type icon-hero">&nbsp;</div> 
</div> 

任何人都可以向我解釋我做錯了什麼，也可能如何以更好的方式實現我的結果（如果可能的話）？

Answer 1

添加float: left到.icon .brigade

.icon .brigade { 
    float: left; 
    margin: 0; 
} 

這應該可以解決你所需要的一切還是讓你在正確的地方來完成它關閉！

紫色框之間的間距是因爲您在使用display: inline-block;以及這些div之間的標記中的空白處生成該間距。

圖標，因爲它缺少top: 0;聲明

Answer 2

你應該使用這個。它必須包含頂部。

.icon .icon-type { position: absolute; left: 0; top:0} 

直播：

http://jsfiddle.net/hWhUb/1/