6

如果你有这样的标记：

<div class="inlineblock">one</div>
<div class="inlineblock">two</div>
<div class="inlineblock">three</div>

和 css 像这样： .inlineblock{ display: inline-block; }

您将在元素之间获得空格。大约 4px 的空间。除非您的标记如下所示：

<div class="inlineblock">one</div><div class="inlineblock">two</div><div class="inlineblock">three</div>

现在，我想知道为什么？

“好”的浏览器仍然这样做的技术原因是什么，即使是在本文发布时最新的 Firefox、Chrome 和 Opera 仍然这样做。我认为它背后有技术原因，否则它现在已经修复了吗？

谢谢！

4

4 回答 4

19

这正是他们应该做的。

行内元素之间的空格与单词之间的空格没有什么不同。

如果您不想这样，请使用块元素，或将字体大小设置为零。

于 2013-05-22T17:33:28.180 回答
4

好吧，它们之间有空格！

如需修复，请尝试font-size: 0在父元素中使用。

于 2013-05-22T17:34:41.933 回答
0

这就是解决方案。

   <style>
    * {
    border:0;
    margin:0;
    padding:0;
    box-shadow:0 0 1px 0px silver;
    }
    .foo {
    width: 100%;
    }
    .bar {
    width: 50%;
    float:left;
    text-align: center;
    }
    </style>
    <div class="foo">
        <div class="bar">
            ...a new customer
        <!-- the whitespace between the following divs affects rendering - why? -->
        </div> <div class="bar">
            ...an existing customer
        </div>
    </div>
于 2013-08-26T13:51:45.467 回答
0

有比将字体大小设置为零更好的方法来删除空白（因为该方法具有令人不快的副作用）。您可以改为使用字间距：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

section {
    word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
    display:table;/* Webkit Fix */
}

div {
    width: 100px; 
    height: 40px; 
    background: #e7e7e7;
    padding: 10px;
    display:inline-block;
    word-spacing:0; /* reset from parent*/
}

</style>
</head>
<body>
<section>
    <div>one</div>
    <div>two</div>
    <div>three</div>
</section>          
</body>
</html>
于 2013-08-26T12:53:14.393 回答