Question

我对HTML非常陌生，在编译运行时，我需要一些关于在HTML代码中删除可视空白的帮助。

这就是我希望我的HTML页面在这个特定区域中的样子：

enter image description here

这就是它在我看来的样子（我不想要这个。我希望它看起来像上面的图片）

enter image description here

这是我用于表元素的代码：

<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

只需将margin:0放在p和ul元素

上

请参阅here

Answer 2

您需要重置用户代理样式表，以便快速修复，您可以使用

* {
    margin: 0;
    padding: 0;
}

Demo

所以在这里，*表示重置文档中所有元素的margin和padding，然后您可以向{/ p}列表中提供margin-left >

* {
    margin: 0;
    padding: 0;
}

ul {
    margin-left: 50px;
}

ol {
    margin-left: 30px;
}

我们重置了margin和padding，因为Firefox，Chrome等浏览器会将一些基本样式应用于HTML文档，也称为用户代理样式表，以便最小化跨浏览器问题您应该使用CSS Reset或使用*选择器margin和padding就足够了。

但是如果你看到，我在这里使用过于通用的选择器，那么最好为你的元素分配一个class，或者你可以将它们包装在一个div下并分配一个{{1} }并适当选择你的清单。

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显示的内容，您可以看到占用空间的边距。（单击＆＃34;选择元素＆＃34;选项 - 开发人员工具窗口左上角的小放大镜。这是IE上的指针图标，然后单击您想要的元素＆＃ 34;检查＆＃34;。）

enter image description here

删除HTML元素之间的可视空白

5 个答案: