显示：内联块额外边距[重复]答案

【问题标题】：display: inline-block extra margin [duplicate]显示：内联块额外边距[重复]
【发布时间】：2010-12-22 11:14:11
【问题描述】：

我正在使用一些设置为display: inline-block 的divs，并有一组height 和width。在 HTML 中，如果在每个 div 之后有一个换行符，则会在 div 的右侧和底部自动添加 5px 边距。

例子：

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

是否有我忽略的属性允许我重置自动边距？

更新

据我发现，没有办法删除边距...除非您将所有内容都放在同一行上，或者添加 cmets 以注释掉换行符。示例：

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

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

【问题讨论】：

无论如何都不是额外的利润。这些块被视为内联内容并应用与单词相关的 CSS。 word-spacing（每个块是一个单词）和 font-size 应用于每个块之间的空白。
一些没有提到的好技巧：css-tricks.com/fighting-the-space-between-inline-block-elements
什么是摆脱底部空白的好方法？如果 inline-block div 在两个普通 div 之间。
我不明白为什么要这样编程。对我来说很明显内联元素之间不应该有任何空格......
面临这个任务，我接近这个边距：-1px -4px 0 -1px;

标签： html css xhtml

【解决方案1】：

空白会影响内联元素。

这不足为奇。我们每天都看到它带有 span、strong 和其他内联元素。将字体大小设置为零以删除多余的边距。

.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/

【讨论】：

效果很好。请注意，如果您使用的是 letter-spacing 或 word-spacing，您还需要将它们设置为 0 才能使此技术起作用。
如此真实！但只有在不使用 em 值时才需要设置它们。
将letter-spacing、word-spacing 和font-size 设置为0 为我解决了水平边距问题。
+1 - 尝试过 Daniels 解决方案，它在 Firefox 中运行良好，但在 safari 或 chrome 中运行良好，但将字体大小设置为 0 在所有三个浏览器中都可以解决问题。
这是最好的解决方案

【解决方案2】：

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

【讨论】：

在 Safari 中， word-spacing: 0 固定间距，但 word-spacing: -1em 不固定。火狐正好相反。如果可能，我会删除 html 代码中元素之间的空格。还不知道 IE7 是做什么的...
另一种方法是在所有元素上使用 float:left 并将容器设置为 overflow:auto 以清除它
字间距技巧可能适用于修复 horizontal 额外边距，但它不能修复（在我尝试过的任何浏览器中）vertical 位于不同行的两个内联块元素之间的边距，一个在另一个之下。有类似的解决方法吗？
@matteo 看看这个 jsfiddle，看看你需要什么的工作示例。 jsfiddle.net/QtDGJ/1
+1 这个答案对我帮助很大。我正在挠头，把键盘砸在墙上=)

【解决方案3】：

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

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

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

【讨论】：

一年后找到了我自己的解决方案，但没有解决我当前的问题。请注意，这显然是特定于问题的。
谢谢！这解决了我与p#myid { display: inline-block } 的具体问题
我发现 mozilla ff 和 chrome 有不同的默认值，或者至少在你指定 vertical-align 之前呈现不同。所以最好总是明确指定它。
谢谢！到目前为止，这是唯一能帮助我在不破坏流程的情况下解决这个问题的方法！
这也适用于我的 div 元素。谢谢，头疼了！

【解决方案4】：

font-size: 0 到父容器

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

【讨论】：

这是天才...浏览器测试会告诉我们
仅供参考：这至少适用于 OS X 上的 Chrome、FF 和 Safari
这是正确的答案，因为额外的“边距”与文本属性有关
如果涉及任何文本，则不会有用。

【解决方案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 中并没有很多问题，甚至认为它不受支持，例如上面的演示工作正常。

【讨论】：

浮动还有很多其他问题，这个问题与内联块有关，而不是替代解决方案
早在 09 年我会同意你的观点，但现代浏览器确实支持这一点。只需尝试打开Demo 并亲自查看。
您仍在处理浮动并会遇到清算问题。这个问题仍然不是关于花车的。这是关于内联块
inline-block > float，大多数情况下，imo。浮点数与现代浏览器无关。即使是 IE6（和更早版本）也可以很好地处理浮点数。（即使现在的 bug 少了一点。）

【解决方案6】：

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

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

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

【讨论】：

【解决方案7】：

为了记录，该边距和填充重置对我没有任何作用，但是上面其中一个 cmets 的引用结果证明是至关重要的，并为我解决了这个问题：“如果我将 div 放在边距消失的同一行。”

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

在多次解决这个问题后，我在 HTML 5 中找到了一个非常优雅的解决方案。在 HTML 5 中，您不应该关闭多个 (li,p,etc) 标签；成为 XML 的雄心一去不复返了。例如，创建列表的首选方式是：

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

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

一个简单的例子：http://cssdesk.com/Ls7fK

【讨论】：

你是对的。有用。非常感谢。

【解决方案10】：

您能否发布指向相关 HTML 的链接？

最终你应该能够做到：

div {
    margin:0;
    padding: 0;
}

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

【讨论】：

现在没有链接...但是，我有一个重置（*），将边距和填充设置为 0。似乎是跨浏览器问题。没有一个浏览器能正确地做到这一点......如果我把 div 放在同一行，它的边距就会消失。我可以这样做，但我对干净的 html 非常讨厌！并且...我有时会使用 inline-block 进行 ul 导航，但我永远无法让该边距消失。谢谢;)
更新...所有这些（8 div 2 行 4 行）都在同一行，底部边距被忽略....它超级奇怪。代码如下： * { 边距：0;填充：0； } div { 边距：0 10px 10px 0; }
一些文字

一些文字
ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

【解决方案11】：

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

去除了多余的换行符和空格，巧妙地解决了边距问题，让您可以在 IDE 中随意编写标记（没有</li><li>）。

【讨论】：

【解决方案12】：

我遇到了同样的问题。对我来说，导致它的是我插入的一堆空格 (&nbsp;)。删除它们后，问题就解决了。

【讨论】：