Question

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

Answer 1

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

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尽可能干净。我首选的方法是将父级的font-size设置为0，然后在内联块本身上设置所需的字体大小。像这样：

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

div div {
    display: inline-block;
    font-size: 14px;
}

Answer 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>

享受并祝你好运！

Answer 3

Inline-block最初是IE6 hack

这是它用于：

修复浮动元素上的IE6双边距错误
在同一水平线上放置多个块状元素没有浮动它们（如果你不能漂浮'特殊情况）
允许内联元素在静止时具有宽度和/或高度保持内联
允许内联元素具有填充或边距

所以，如果你想在彼此旁边有多个div，请使用float，它将解决内联块可能导致的许多css问题，尤其是跨浏览器问题

有关内联块here第9.2.4节的更多信息

祝你好运 SP

如果不同意，请发表评论

Answer 4

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

$("ul li label span").each(function(index) {
    alert(index + ": " + $(".price").text());
});

Answer 5

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

以下是plunkr：https://plnkr.co/edit/Sn3NG77asiXO8UrrpxWD?p=preview

没有边距的内联块？

5 个答案: