刪除ul之間的空格

我使用<ul>創建了一個列表，但我需要將其「統一」。儘管我刪除了所有的邊框，填充和邊距，但它仍然在圖像之間創建了一個空格。我怎樣才能刪除它？刪除ul之間的空格

<h4>An Unordered List:</h4> 
<ul> 
    <li><img class="nomarge" ..../></li> 
    <li><img class="nomarge" ..../></li> 
    <li><img class="nomarge" ..../></li> 
</ul> 
<ul> 
    <li><img class="nomarge" ..../></li> 
    <li><img class="nomarge" ..../></li> 
    <li><img class="nomarge" ..../></li> 
</ul>

CSS

ul { 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px; 
    border: 0px 0px 0px 0px; 
    display: table; 
    table-layout: fixed; 
    display: inline; 
} 

li { 
    padding: 0px 0px 0px 0px; 
    border: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px; 
    display: table-cell; 

}

來源

2013-06-05 Pedro Silva

使用負值可能是一個辦法... –

如果你有'0px'作爲值，您可以安全地忽略該單位。「0px」與「0em」，「0％」等相同。 – kleinfreund

圖像需要在一行還是多行？ – Daniel

使用這個CSS：

img{ display: block;}

來源

2013-06-05 14:11:06 Ani

感謝格式化，皮特！ – Ani

這解決了我的問題，謝謝:) –

不客氣！ :) – Ani

什麼都在img標籤設置的樣式？你應該把它們設置爲0。順便說一下，如果您使用CSS設置元素的所有邊（頂部，底部，左側，右側）的像素尺寸，則可以簡化0（無單位），而不是重複執行0px四次。

即：

border: 0; 
padding: 0; 
margin: 0;

來源

2013-06-05 14:08:36 smilebomb

img最大寬度：100％;最大寬度：100％。 border：0; -ms-interpolation-mode：bicubic; 寬度：自動; 身高：自動; } –

@PedroSilva將填充和邊距也設置爲0。默認情況下，用戶代理樣式表通常會在圖像上填充一些填充。有我可以看的鏈接嗎？ – smilebomb

是的，謝謝，我知道，這個「長碼」只是爲了確保我做對了。 :) –

您需要使用display: table-cell;爲UL元素。這是我所取得的成就。

http://jsfiddle.net/REmUC/

來源

2013-06-05 14:14:15

添加img { vertical-align: sub; }，它應該工作。

ul { 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px; 
    border: 0px 0px 0px 0px; 
    display: table; 
} 

li { 
    padding: 0px 0px 0px 0px; 
    border: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px; 
    display: table-cell; 
} 

img { 
    vertical-align: sub; 
}

http://jsfiddle.net/pulleasy/Cw3Gj/

來源

2013-06-05 14:18:44 Daniel

圖像之間的間隙來自vertical-align: baseline;所有圖像（內聯塊元件）已經默認分配。通過這種方式，圖像與普通文本位於同一行。這可能很有用，但不在你的用例中。

將此屬性設置爲中等，以避免這個問題：

img { 
    vertical-align: middle; 
}

來源

2013-06-05 14:18:53 kleinfreund

試試這個CSS：

ul { 
    padding: 0px; 
    border: 0px; 
    display: table; 
    table-layout: fixed; 
    display: inline; 
} 

li { 
    padding: 0px; 
    border: 0px; 
    display: table-cell; 
    border-spacing: 0px 0px; 
    border-collapse: collapse; 
} 
img { 
    padding: 0px; 
    margin: 0px; 
}

來源

2013-06-05 14:22:42 Gimmy

刪除ul之間的空格

回答

相關問題