Html 在未列出浮动时如何删除自然余量

我用div和按钮之类的东西四处测试，我注意到当我去掉一个float时，它会增加一个自然的边距。 当我输入这个的时候

body {
background: gray;
}

        button {
        font-size: 17px;
        color: white;
        margin-left: 0px;
        margin-right: 0px;
        border: 0;
        width: 100px;
        height: 40px;
        text-align: center;
        vertical-align: middle;
        background: rgba(0,0,0,0.0);
        transition: background 400ms;
        -webkit-transition: background 400ms;
        }

        button:hover {
        background: rgba(0,255,255,0.3);
        }

JSFiddle：

（您可以突出显示按钮之间的小边距）

如何在不使用浮动的情况下删除“自然”边距

---

注意：我只想删除按钮的边距，其他什么都不做。您的站点是否有CSS重置脚本：这将把“自然”边距设置为0，很可能会解决您的问题。

就像

*
{
  margin:0px;
  pading:0px; //optional if you need
}

使用css rest也是一个不错的选择

在这里，您可以找到最常用的css重置小提琴中的

元素，至少在Chrome（我目前正在使用）中，有一个默认的

显示：inline块样式。相邻的
内联块
元素（以及
内联
元素）将允许呈现元素之间的空白（此处的空白是
元素之间的换行符）。这是完全正常的，遵循
内联块
规范。这不是由于任何
边距
或
填充
造成的

您可以看到，删除空白（如中）将删除元素之间的“自然”（或“重影”）间距。您可以在以下位置找到缓解此空间的其他技术

有些技巧涉及在注释中包装空白：

<button>Text</button><!--
--><button>Text</button>

这些技术基本上删除了空白，因此浏览器不需要渲染空白

对于某些元素，如
（但不是
），您可以简单地去掉结束标记，因为这是有效的标记，浏览器将忽略元素之间的所有空白：

<li>Item text
<li>Next item

项目文本
下一项

另一种技术涉及在包含
内联块
或
内联
元素的元素上设置
字体大小：0，如中所示。使用这种技术，您必须为实际包含文本的子元素设置字体大小，以便您仍然可以看到它！这也会使基于
em
大小的字体变得混乱，因此这并不总是最好的解决方案，但它是一个很好的解决方案，不需要混淆标记

还有一种技术是在元素上设置一个负的边（左或右）
margin
，但这在语义上是不正确的边距用法（它们真的不应该是负的，有点粗糙），边距值的大小取决于字体大小的呈现，在浏览器和操作系统之间可能会有所不同，因此，这个解决方案有一个很小的突破机会（要么显示一个很小的间隙，要么重叠元素），我不建议这样做

当然，另一个解决方案是保留一个
浮动规则：）。
我不想只通过按钮删除所有边距。谢谢。我从来都不知道。@XeroElixir很多人不知道这一点，所以当我看到它时，我总是想解释一下，让更多的人知道它。
<li>Item text
<li>Next item