9

我有几个 DIV 显示为内联块；并且它们似乎正在从浏览器中自动在它们之间应用间距。他们将边距/填充设置为 0。有没有办法在不使用负边距的情况下纠正这个问题？

4

5 回答 5

13

山姆，你看到的那个空间实际上是空白。这就是为什么删除填充和边距什么都不做的原因。让我解释。当你有这个：

HTML

<div>
    a
    a
    a
    a
</div>

这是它的渲染方式：

a a a a

...正确的？

所以，如果你有这个：

<div>
    <div style="display:inline-block"></div>
    <div style="display:inline-block"></div>
    <div style="display:inline-block"></div>
</div>

...你会得到同样的东西：

block [space] block [space] block

现在......这个问题有很多不同的解决方案。我相信最常见的是注释掉 html 中的空格：

   <div>
        <div style="display:inline-block"></div><!--
        --><div style="display:inline-block"></div><!--
        --><div style="display:inline-block"></div>
   </div>

不过我不喜欢它——我更喜欢保持 html 尽可能干净。我首选的方法是将父级的字体大小设置为 0，然后在内联块本身上设置所需的字体大小。像这样：

div {
    font-size: 0; /* removes the whitespace */
}

div div {
    display: inline-block;
    font-size: 14px;
}
于 2012-07-12T21:47:47.003 回答
2

您不需要使用负边距来抵消原始边距。

相反，您可以使用以下内容覆盖它们：

* { margin:0; }

或者：

.div { margin:0; }

如果它是特定于元素的。

编辑：

看来问题可能是意外空白的结果。例如：

<div style="display:inline-block">
    ...
</div>
<div style="display:inline-block">
    ...
</div>

两个分隔符之间存在空白，浏览器将打印空白。要解决此问题，您需要将其更改为：

<div style="display:inline-block">
    ...
</div><div style="display:inline-block">
    ...
</div>

享受和好运！

于 2012-07-12T20:04:47.613 回答
2

您可以同时使用display: inline-block和float: left来删除该空间。

这里是 plunkr：https ://plnkr.co/edit/Sn3NG77asiXO8UrrpxWD?p=preview

于 2017-01-14T19:17:44.460 回答
0

Inline-block 最初是一个 IE6 hack

这就是它的用途：

  • 修复浮动元素上的 IE6 双倍边距错误
  • 将多个块状元素放置在同一水平线上而不浮动它们（如果你不能浮动'例外情况）
  • 允许内联元素具有宽度和/或高度，同时仍保持内联
  • 允许内联元素具有填充或边距

所以如果你想有多个 div 并排请使用 float，它会解决你的许多 inline-block 可能导致的 css 问题，尤其是跨浏览器问题

有关 inline-block 的更多信息，请参见第 9.2.4条

最好的问候 SP

如果不同意请评论

于 2012-09-11T14:49:47.930 回答
0

我发现改变父容器上的字间距的另一种方法对我有用 https://jsfiddle.net/1ex5gpo3/2/

.parent {
    word-spacing: -1em;
}

.child {
    word-spacing: normal;
    display: inline-block;
}
于 2016-02-09T10:12:04.230 回答