CSS：0ピクセル以下のすべてのパディングとスペーシングを削除できますか？

Question

私はテーブルのセルに新しい画像を入れました。テーブルが少し大きくなりました。私はすべてのパディングと間隔を0に減らしましたが、まだ画像の端に約4ピクセルのギャップがあります（32ピクセルの長方形フラグ）。テーブルセルからすべての空白を削除することは可能ですか？細胞のための

私のCSSは次のとおりです。彼らが必要とする

.flag { 
    margin: 0px !important; 
    padding: 0px !important; 
    border-spacing:0 !important; 
    height:28px !important; 
    width:32px !important; 
    line-height:32px !important; 
} 

。なお、彼らは過乗って別のCSSをしているので、「重要！」。フラグの正確な高さは28ピクセルです。それ以下の高さにすると、フラグがセルの底部で削られ始めます。

多くの人が自分のために試すことができるように、

td { border: 1px solid black; }

<link 
 
    rel="stylesheet" 
 
    type="text/css" 
 
    href="//cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.css" 
 
    /> 
 

 
    <table class = 'f32'><tr><td class = 'flag us'></td></tr></table>

あなたのテーブルが見えるボーダーがあり、フラグ画像の上と下の間隔の公平なビットがあることがわかります確認してください。私はそれを取り除きたい、あるいは好ましくは1ピクセル上下を除くすべてを取り除きたい。

Answer 1

空白が画像の周囲にあるのか、その下にあるのかによって異なります。

vertical-align:baseline;をCSSルールに追加してください。これは、画像の下の不要なスペースを少なくとも取り除くはずです。

画像自体の中に空白がある場合、あなたはそこにある請求

.flag img { 
    margin-top: -4px; 
} 

Answer 2

空白は画像自体の中にあり、そしてそれは、「スプライト」を使用しています、のように、画像上の負のマージン値を試してみてください適切なアイコンが表示されるように複数の画像とbackground-positionが設定されています。

私は以下のように考えています。 !importantを使用せずにスタイルをオーバーライドしました。セレクタは、オーバーライドしているセレクタよりも具体的である必要があります。

.f32 td.flag.us { 
 
    border: 1px solid black; 
 
    height: 23px; 
 
    overflow: hidden; 
 
    background-position: 0 -7332px; 
 
    width: 30px; 
 
}

<link rel="stylesheet" type="text/css" href="//cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.css" /> 
 

 
<table class='f32'> 
 
    <tr> 
 
    <td class='flag us'></td> 
 
    </tr> 
 
</table>