Question

如果你有这样的标记：

<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在发布时仍然这样做。我假设背后有技术原因，否则它现在已经解决了？

谢谢！

Answer 1

这正是他们应该做的事情。

内联元素之间的空格与单词之间的空格没有区别。

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

Answer 2

嗯，它们之间有空格！

要修复此问题，请尝试在父元素中使用font-size: 0。

Answer 3

除了将字体大小设置为零（这种方法有令人不快的副作用）之外，还有一种更好的方法可以消除空白区域。你可以改为字间距：

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

Answer 4

这是解决方案。

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

如果有空格，为什么现代浏览器仍然在内联块之间放置空格

4 个答案: