刪除HTML元素之間的可視空白

Question

我是HTML的新手，在編譯運行HTML時，我需要一些幫助來消除HTML代碼中的可視空白。

這就是我希望我的HTML頁面在這個特定區域中的樣子：

這就是它在我看來的樣子（我不想要這個。我希望它看起來像上面的圖片）

這是我用於表元素的代碼：

<ul>
    <li>
    <p>Gorras</p>
    <ol>
        <li>Small - $10.00</li>
        <li>Medium - $12.00</li>
        <li>Large - $15.00</li>
</ol>        
</li>
</ul>

<ul>
    <li>
    <p>Camisas</p>
    <ol>
        <li>Small - $20.00</li>
        <li>Medium - $22.00</li>
        <li>Large - $25.00</li>
</ol>        
</li>
</ul>

<ul>
    <li>
    <p>Calzado</p>
    <ol>
        <li>Small - $50.00</li>
        <li>Medium - $60.00</li>
        <li>Large - $75.00</li>
</ol>        
</li>
</ul>

<ul>
    <li>
    <p>Gafas</p>
    <ol>
        <li>Small - $10.00</li>
        <li>Medium - $12.00</li>
        <li>Large - $15.00</li>
</ol>        
</li>
</ul>

有什么辦法可以刪除每個列表之間的這些空格嗎？

非常感謝您，請原諒我，因為我是HTML的新手。

Answer 1

只需在你的p和ul元素上加上margin:0

看到這里

Answer 2

您需要重置用戶代理樣式表，以便快速修復，您可以使用

* {
    margin: 0;
    padding: 0;
}

演示

所以在這里， *意味着重置文檔中所有元素的margin和padding ，然后相應地你可以向列表提供margin-left如

* {
    margin: 0;
    padding: 0;
}

ul {
    margin-left: 50px;
}

ol {
    margin-left: 30px;
}

我們重置margin和padding因為像Firefox，Chrome等瀏覽器會將一些基本樣式應用於HTML文檔（也稱為用戶代理樣式表），因此為了使交叉瀏覽器問題最少，您應該使用CSS重置或使用帶有margin *選擇器並且padding也足夠。

但是如果你看到，我在這里使用過於通用的選擇器，那么最好為你的元素分配一個class ，或者你可以將它們包裝在一個div並為其分配一個class並適當地選擇你的列表。

Answer 3

您需要設置邊距

ul, li, p {margin: 0;}

JSFIDDLE DEMO

Answer 4

刪除<p></p>標記並添加如下的margin樣式

<ul  style="margin:0;">
    <li>
    Gorras
    <ol>
        <li>Small - $10.00</li>
        <li>Medium - $12.00</li>
        <li>Large - $15.00</li>
</ol>        
</li>
</ul>

Answer 5

那是因為<ul>的默認邊距。 此邊距來自未指定樣式時瀏覽器使用的默認樣式集。

您可以使用任何現代瀏覽器的開發人員控制台（開發人員控制台可以通過點擊F12 ）。

這就是Chrome所顯示的內容，您可以看到空白處占據了空白。 （單擊“選擇元素”選項 - 開發人員工具窗口左上角的小放大鏡。這是IE上的指針圖標，然后單擊要“檢查”的元素。）