如何刪除無意中出現的圖像填充？

我有一個應該無縫堆疊的容器中的三個圖像，但它們之間存在一些填充。如何刪除無意中出現的圖像填充？

您可以在這裏看到的頁面：http://www.arbitersoflight.net/media/

在左邊的容器中的三個大按鈕是有問題的人。

下面是容器代碼：

CSS

#mainBoxFull { 
    background-image: url(/img/cont/mainfull.jpg); 
    float: left; 
    height: 560px; 
    width: 560px; 
    margin: 0px; 
    padding: 20px; 
}

HTML

<div id="mainBoxFull"> 
    <img src="/img/btns/media/bgal.jpg" alt="screenshot" width="560" height="180" border="0" /> 
    <img src="/img/btns/media/bvid.jpg" alt="videos" width="560" height="200" border="0" /> 
    <img src="/img/btns/media/bsoon.jpg" alt="coming soon" width="560" height="180" border="0" /> 
</div>

來源

2011-01-21 Ferret

的問題是，圖像是內聯塊。也就是說，他們之間的空間被計算在內。這些空間以填充形式出現在你身上。使用

#mainBoxFull img { display: block; }

並且問題應該消失。或者，您可以刪除div和img元素之間的源HTML中的空白區域（全部爲空白區域）。

來源

2011-01-21 14:40:31 Boldewyn

+1，float：left;在圖像上也會起作用。 – plebksig 2011-01-21 14:43:20

工作很好，謝謝！ – Ferret 2011-01-21 14:53:23

另一個選項來解決同樣的問題是

#mainBoxFull{ font-size:0; }

它會忽略之間的所有空格。 +你可以選擇字體大小，只要你有文字。

來源

2013-11-22 10:19:03 user3016780

如何刪除無意中出現的圖像填充？

回答

相關問題