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

请注意，他们需要重要的＆＃39;因为他们超越了另一个CSS。标志的确切高度似乎是28px。如果我将高度降低到低于该值，则标志开始在单元格的底部被削掉。

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

＆＃13;

td { border: 1px solid black; }

＆＃13;

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

＆＃13;

确保您的桌子有可见边框，并且您会看到标志图像上方和下方有相当大的间距。我想摆脱它，或者最好除了上面和下面的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>

CSS：可以删除0像素以下的所有填充和间距？

2 个答案: