显示: 行内块额外边距

我的工作与一些 div是设置为 display: inline-block，并有一套 height和 width。在 HTML 中，如果在每个 div之后都有一个换行符，那么在 div 的右边和底部会自动添加一个5px 的边距。

例如:

<div>Some Text</div>
<div>Some Text</div>

是否有一个我忽略的属性可以让我重置自动保证金？

更新

根据我的发现，没有办法删除边距... ... 除非你要么把所有东西都放在同一行上，要么添加注释来注释掉换行符。例如:

<div>Some Text</div><!--
--><div>Some Text</div>

这不是最好的解决方案，但是如果您有多行代码，阅读起来还是很容易的。

159484 次浏览
小开

你能发布一个链接到有问题的 HTML？

最终，你应该能够做到:

div {
margin:0;
padding: 0;
}

删除间距。这只是在一个特定的浏览器或所有？

小开

顺便说一句，那个空白和填充重置对我来说并没有起到什么作用，但是上面其中一条评论中的一句话对我来说是至关重要的，它解决了这个问题: “如果我把 div 放在同一行上，那么空白就会消失。”

小开
最佳答案

Div 被视为 inline-element。正如两个跨度之间的空格或换行符会产生间隔一样，内联块之间也会产生间隔。您可以给它们一个负边距，或者在周围的容器上设置 word-spacing: -1;。

小开

一年之后，在内联 LI问题中偶然发现了这个问题，但是已经找到了一个可能适用于这里的很好的解决方案。

Http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

在所有的 LI元素上的 vertical-align:bottom修复了我在所有浏览器中的“额外边距”问题。

小开

空白影响行内元素 。

这不应该让人感到意外。我们每天都看到它的跨度，强度和其他内嵌元素。将字体大小设置为零可以删除额外的边距。

.container {
font-size: 0px;
letter-spacing: 0px;
word-spacing: 0px;
}


.container > div {
display: inline-block;
margin: 0px;
padding: 0px;
font-size: 15px;
letter-spacing: 1em;
word-spacing: 2em;
}

这个例子看起来就像这样。

<div class="container">
<div>First</div>
<div>Second</div>
</div>

这个的一个 jsfiddle 版本

小开

对于这个问题有许多解决办法，包括字间距或字体大小，但是本文建议删除右边距为 -4 px 的边距;

Http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

小开

清除这些空间的更干净的方法是使用 float: left;:

演示

HTML:

<div>Some Text</div>
<div>Some Text</div>

CSS:

div {
background-color: red;
float: left;
}

它在 所有新的浏览器中得到了支持。从来没有得到它为什么回当 IE 规定很多开发人员没有起诉他们的网站在 Firefox/chrome 上运行良好，但是今天，当 IE 下降到了14.3% 。无论如何，在 IE-9没有很多问题，即使它不支持，例如上面的演示工程罚款。

小开

在多次与这个问题斗争之后，我在 HTML5中找到了一个非常优雅的解决方案。在 HTML5中，您不应该关闭多个(li、 p 等)标记; 成为 XML 的雄心已经一去不复返了。例如，列表的首选方法是:

<ul>
<li>
<a ...>...</a>
<li>
<a ...>...</a>
</ul>

浏览器必须关闭 LI，而且必须在不引入空格的情况下做到这一点，从而解决这个问题。如果您仍然抱着 XML 的心态，那么您会觉得这是错误的，但是一旦您克服了这种心态，就可以避免许多噩梦。这并不是一种技巧，因为它依赖于 HTML5规范的措辞。更好的是，由于不关闭标记是普遍存在的，我预计不会出现兼容性问题(尽管没有测试)。额外的好处是 HTML 格式化程序可以很好地处理这个问题。

一个小例子: http://cssdesk.com/Ls7fK

小开

即使在内联块元素之间没有任何空白，也可以获得垂直空间。

对我来说，这是由 line-height引起的。简单的解决办法是:

div.container {
line-height: 0;
}
div.container > * {
line-height: normal;
}
小开

font-size: 0到父容器

(来源: https://twitter.com/garand/status/183253526313566208)

小开

另一种解决方案是使用 HTML 缩小器。这在 Grunt 构建过程中效果最好，可以动态缩小 HTML。

删除了额外的换行符和空格，这巧妙地解决了边距问题，并且允许您在 IDE 中按照自己的喜好(没有 </li><li>)编写标记。

小开

我也遇到了同样的问题。 造成这种情况的原因是我插入了一堆空白(&nbsp;)。 移除它们之后，问题就解决了。


提交答案