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

Question

I've put a new image in my table cells and it's making the table a bit bulky. I've reduced all padding and spacing to 0, but there are still gaps of about 4 pixels around the edge of the images (32 pixel rectangular flags). It is possible to remove all white space from a table cell?

My CSS for the cells is :

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

Note that they need '!important' because they're over-riding another CSS. The exact height of the flags appears to be 28px. If I reduce height below that, the flag starts to get shaved off at the bottom of the cell.

More info so people can try for themselves.

 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> 

Make sure your table has visible borders and you'll see that there's a fair bit of spacing above and below the flag image. I want to get rid of that, or preferably all except 1 pixel above and below.

Answer 1

It depends if the white space is all around the images or only below them.

Try to add vertical-align:baseline; to your CSS rule for the cells - this should at least eliminate unwanted space below the image.

If there is whitespace within the image itself, you might try negative margin values on the images, like

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

Answer 2

The whitespace is within the image itself, and it's using a "sprite", wherein there are multiple images and a background-position is set such that the appropriate icon is displayed.

I've replicated what I think you want below. Note that I've overridden the styles without the use of !important . You just need the selector to be more specific than the one you're overriding.

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