CSS：可以刪除所有填充和間距，低於0像素？

我已經在我的表格單元格中放置了一個新的圖像，這使得表格有點笨重。我已將所有填充和間距減少到0，但圖像邊緣（32像素矩形標記）周圍仍有大約4個像素的間隙。可以從表格單元中刪除所有空白區域？CSS：可以刪除所有填充和間距，低於0像素？

我對細胞的CSS是：

.flag { 
    margin: 0px !important; 
    padding: 0px !important; 
    border-spacing:0 !important; 
    height:28px !important; 
    width:32px !important; 
    line-height:32px !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個像素。

來源

2016-05-04 Farflame

請問空白上的實際圖像文件？這聽起來很奇怪，但有時候刪除html元素之間的實際空白是有訣竅的。 –

它可能是，但不幸的是，這是超出我的控制，因爲我導入圖像。不太確定如何檢查。如果是這樣，無論如何不可能強制細胞達到一定的高度，然後以某種方式將細胞置於細胞中央？當我嘗試時，它只是將它向下推，部分不在細胞中。 – Farflame

Welp。如果沒有一些實驗，不能確切地說，恐怕我不會有太多的幫助。希望你找到你的答案！ –

這取決於空白是圍繞圖像還是隻在圖像的下方。

嘗試將vertical-align:baseline;添加到您的CSS規則中 - 這應該至少消除圖像下面的不需要的空間。

如果圖像本身的空白，你可以嘗試負邊界值上的圖像，就像

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

來源

2016-05-04 22:12:32 Johannes

的空白是圖像本身，它的使用「精靈」，其中有多個圖像和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>

來源

2016-05-04 22:25:03

這個結果絕對是我之後的事，但它太具體了。我需要使用所有的標誌，而不僅僅是美國國旗。我看到他們是23px高這有助於。 – Farflame

嗯，奇怪的是，在擺弄了一下後，試圖找出每個部分正在做什麼，將它縮小到只有\t height：28px！important; \t margin-top：-4px;似乎已經做到了。 – Farflame

CSS：可以刪除所有填充和間距，低於0像素？

回答

相關問題