删除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上的指针图标，然后单击要“检查”的元素。）