CSS：是否可以删除所有填充和间距（小于0像素）？

Question

我在表格单元格中放置了一个新图像，这使表格有点笨重。 我将所有填充和间距都减小为0，但是在图像边缘（32个像素的矩形标志）周围仍然有大约4个像素的间隙。 可以从表格单元格中删除所有空白吗？

我的单元格的CSS是：

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

请注意，它们需要'！important'，因为它们将覆盖另一个CSS。 标志的确切高度似乎是28px。 如果我将高度降低到低于该高度，该标志将在单元格的底部开始被刮掉。

更多信息，以便人们可以自己尝试。

 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

空格位于图像本身内，并且使用“ sprite”，其中有多张图像，并且设置了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>