Question

我正在使用设置为div且设置为display: inline-block和height的{{1}}个width。在HTML中，如果在每个div之后有换行符，则会在div的右下角添加一个自动5px边距。

示例：

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

是否有我忽略的财产可以让我重置自动保证金？

更新

从我发现的内容中无法删除边距...除非您要么在同一行上有所有内容，要么添加注释以注释掉换行符。例如：

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

不是最佳解决方案，但如果您有多行，仍然更容易阅读。

Answer 1

空格会影响内联元素。

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

.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版本。 http://jsfiddle.net/QtDGJ/1/

Answer 2

div被视为内联元素。正如两个跨距之间的空间或换行符会产生间隙一样，它也可以在内联块之间进行。你可以给它们一个负余量，或者在周围的容器上设置word-spacing: -1;。

Answer 3

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

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

我所有vertical-align:bottom元素上的

LI修复了所有浏览器中的“额外边距”问题。

Answer 4

font-size: 0到父容器

（来源：https://twitter.com/garand/status/183253526313566208）

Answer 5

删除这些空格的更清洁方法是使用float: left;：

DEMO

<强> HTML：

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

<强> CSS：

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

我在all new browsers中受到支持。从来没有得到它为什么回来当IE统治很多开发人员没有起诉他们的网站在firefox / chrome上运行良好，但今天，IE is down to 14.3 %时。无论如何，IE-9中没有很多问题，甚至认为它不受支持，例如上面的演示工作正常。

Answer 6

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

对我而言，这是由line-height引起的。简单的解决方法是：

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

Answer 7

为了记录，这个边距和填充重置对我来说不起作用，但上述评论之一的引用证明是至关重要的并且解决了我的问题：“如果我把div放在保证金消失的同一行。“

Answer 8

此问题有许多解决方法，涉及字间距或字体大小，但本文建议删除边距为-4px的右边距;

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

Answer 9

您可以发布相关HTML的链接吗？

最终你应该能够做到：

div {
    margin:0;
    padding: 0;
}

删除间距。这只是在一个特定的浏览器中还是全部？

Answer 10

经过多次努力解决这个问题后，我在HTML 5中找到了一个非常优雅的解决方案。在HTML 5中，你不应该关闭几个（li，p等）标签;成为XML的雄心永远消失了。例如，执行列表的首选方法是：

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

浏览器必须关闭LI并且必须在不引入空格的情况下执行此操作，以解决此问题。如果你仍然拥有XML思维方式，那就感觉不对了，但是一旦你克服了它就会拯救许多噩梦。这不是一个黑客，因为它依赖于HTML 5规范的措辞。更好，因为没有关闭标签是普遍的我期望没有兼容性问题（虽然没有测试）。好处是HTML格式化程序可以很好地处理这个问题。

一个有点成功的例子：http://cssdesk.com/Ls7fK

Answer 11

另一个解决方案是使用HTML minifier。这最适用于Grunt构建过程，其中HTML可以动态缩小。

删除了额外的换行符和空格，这样可以很好地解决边距问题，并允许您在IDE中编写标记（无</li><li>）。

Answer 12

我遇到了同样的问题。导致它的原因是我插入了一堆空格（ ）。删除它们后，问题就解决了。

显示：内联块额外边距

12 个答案:

DEMO