3

我正在测试 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/

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

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

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

4

3 回答 3

2

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

您可以看到删除空格（就像在这个小提琴中一样）将删除元素之间的“自然”（或“鬼”）间距。您可以在此链接中找到缓解此空间的其他技术。

一些技术涉及在注释中包装空格：

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

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

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

这些技术基本上删除了空白，因此浏览器没有要呈现的空白。

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

<li>Item text
<li>Next item

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

另一种技术涉及margin在您的元素上设置负边（左侧或右侧），但这在语义上是不正确的边距使用（它们真的不应该是负数，这有点骇人听闻），边距值的大小将取决于字体大小渲染，在浏览器和操作系统之间可能会有所不同，所以这个解决方案有很小的破坏机会（要么显示一个微小的间隙，要么重叠元素），我不建议这样做。

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

于 2013-11-09T18:53:30.570 回答
0

你有没有为你的网站设置一个 CSS 重置脚本：http ://www.cssreset.com/这会将“自然”边距设置为 0，并且很可能会解决你的问题。

于 2013-11-09T18:38:27.537 回答
0

就像

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

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

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

于 2013-11-09T18:40:07.463 回答