html - 如何去除行内li元素的默认外边距？

Question

我有以下 HTML 和 CSS:

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

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

我试图通过设置 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。下降闭合 Angular

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