如何删除li元素边距

Question

我有以下html

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

和css

li {
    display: inline-block;
    padding: 10px;
    border: 1px solid red;
    margin: 0;
}

DEMO

我试图通过设置margin: 0;来删除li元素中的边距。但它没有删除保证金

如何删除

Answer 1

将所有li组合在一行中可以解决问题。但是，如果您想了解更多删除边距的技巧，可以访问：http://davidwalsh.name/remove-whitespace-inline-block。

列出了这些技巧：

1。元素之间没有空间

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

2。字体大小：父

上的0

.inline-block-list { /* ul or ol with this class */
font-size: 0;
}

.inline-block-list li {
font-size: 14px; /* put the font-size back */
}

3。 HTML评论

<ul>
 <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

4。负利润

.inline-block-list li {
margin-left: -4px;
}

5。降低关闭角度

<ul>
 <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

Answer 2

尝试float: left;这将强制您的列表项呈现而不会有额外的空格。

li {
    display: inline-block;
    padding: 10px;
    border: 1px solid red;
    margin: 0;
    float: left;
}

Answer 3

这是一个奇怪的事情，你需要删除空格看看这个小提琴

<ul>
    <li>one</li><li>two</li><li>three</li>
</ul>

http://jsfiddle.net/TPje6/3/

您可以做的另一件事是添加margin: -2px;：http://jsfiddle.net/TPje6/6/

浮动技巧也很有效，但是造型更难定位

Answer 4

在一行中更改标记以删除默认的空格

<ul>
    <li>one</li><li>two</li><li>three</li>
</ul>

<强>的CSS

li {
    display: inline; // Change
    padding: 10px;
    border: 1px solid red;
    margin: 0;
}

Demo

Answer 5

这是如何为内联元素呈现空白的令人讨厌的副作用。有一些选项可以解决它。

选项1： 使用float: left元素

上的li属性

的 jsfiddle

li {
    display: inline-block;
    padding: 10px;
    border: 1px solid red;
    margin: 0;
    float: left;
}

选项2： 从html标记中删除空格

的 jsfiddle

<ul>
    <li>one</li><li>two</li><li>three</li>
</ul>

选项3： 将font-size的{​​{1}}属性设置为ul

的 jsfiddle

0px

Answer 6

您可以li成为font-size: 0; 然后将li a设置为正常font-size

通过这种方式，您可以将空白设置为0像素宽，并保持html 干净并且易于阅读。

Answer 7

使用以下css规则渲染样式

li {
    border: 1px solid #FF0000;
    display: table-column-group;
    float: left;
    margin: 0;
    padding: 10px;
   }

Answer 8

元素上的填充就是这样做的。这样做：

ul {
  padding-left: 0;
}

这将完全删除填充。如果您仍然需要一些填充，请根据自己的喜好调整值。