Question

我正在测试div和按钮和东西，我注意到当我移除浮子时，它增加了自然边距。当我输入这个

时

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：http://jsfiddle.net/uBBeX/

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

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

注意：我只想删除按钮的边距，没有别的。

Answer 1

小提琴中的<button>元素，至少在Chrome中（我目前正在使用），具有默认的display: inline-block;样式。相邻的inline-block元素（以及inline元素）将允许元素之间的空白进行渲染（这里的空格是<button> s之间的换行符）。 这是完全正常的，并遵循 inline-block 规范。由于任何margin或padding

，这不

您可以看到删除空格（如this fiddle）将删除元素之间的“自然”（或“重影”）间距。您可以在this link找到其他缓解此空间的技术。

一些技术涉及在评论中包装空格：

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

或在结束标记和下一个开始标记之间移动结束>：

<button>Text</button
><button>Text</button>

这些技术基本上删除了空格，因此浏览器无法渲染。

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

<li>Item text
<li>Next item

另一种技术涉及在包含font-size: 0或inline-block元素的元素上设置inline，如this fiddle中所示。使用这种技术，您必须设置实际具有文本的子元素的字体大小，以便您仍然可以看到它！这也可能会根据em大小搞乱字体，所以它并不总是最好的解决方案，但它是一个很好的解决方案，不会涉及到你的标记。

另一种技术涉及在元素上设置负面（左或右）margin，但这在语义上是不正确的边距使用（它们实际上不应该是负面的，它是一种hacky），以及边距值的大小将取决于字体大小呈现，这可能因浏览器和操作系统而异，因此该解决方案的破坏机会很小（显示微小间隙或重叠元素），并且不是我建议的

当然，另一种解决方案是保留float规则:)。

Answer 2

您的网站是否有CSS重置脚本：http://www.cssreset.com/这会将“自然”边距设置为0，最有可能解决您的问题。

Answer 3

就像

一样

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

使用css休息也是一个不错的选择。

在这里，您可以找到最常用的css-reset http://meyerweb.com/eric/tools/css/reset/

如何在未列出浮动时删除自然边距

3 个答案: