Question

当我在<span>内放置一个固定大小的显示块<div>元素时，它会在<div>的底部产生一个奇怪的边距或填充（我不知道）。当<span>元素中有文本时，一切都很好。这是什么原因？我该如何解决？我在Firfox和Chrome上测试过。

Weird space http://picster.at/img/0/9/6/0968c75ddf29ad07cb71eee2cff472a9.png

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
    <!--
    .outer {
        background: grey;
        padding: 4px;
    }
    .inner {
        display: inline-block;
        background: cyan;
        height: 40px;
        width: 40px;
    }
    -->
    </style>
</head>

<body>
    <div class="outer">
        <span class="inner">Foo</span>
    </div>

    <br>

    <div class="outer">
        <span class="inner"></span>
    </div>
</body>

</html>

更新

浮动可以替代显示块元素。完全有效，但是我想了解这个例子中display-block的错误。此外，它对我来说看起来不像是一个白色空间问题，因为这只会影响左/右边距（如果我错了，请纠正我）。

Answer 1

这个黑客对我很有用。

Demo

.inner:after{
        content: '\00a0';
}

Answer 2

这是因为您使用的是inline-block;，这是inline-block与floats不同的最佳示例

Demo

.outer {
    background: grey;
    padding: 4px;
    overflow: hidden;
}

.inner {
    float: left;
    background: cyan;
    height: 40px;
    width: 40px;
}

inline-block留下4px边距的空白。

More Info

Answer 3

inline-block正在弄乱它

如果您将其设置为内联块的意图是设置一行.inner's，请将内部更改为阻止，然后向左浮动。

然后使用带有clear的div：两者来解决通常浮动导致的问题。

以下是您修改的代码：

<head>
    <style type="text/css">
    <!--
    .outer {
        background: grey;
        padding: 4px;
    }
    .inner {
        display: block;
        background: cyan;
        height: 40px;
        width: 40px;
        float: left;
        margin-right: 4px;
    }
    .clear{
        clear:both;
    }
    -->
    </style>
</head>

<body>
    <div class="outer">
        <span class="inner">Foo</span>
        <div class="clear"></div>
    </div>

    <br>

    <div class="outer">
        <span class="inner"></span>
        <span class="inner"></span>
        <div class="clear"></div>
    </div>
</body>

</html>

Answer 4

可以通过将外部元素的“line-height”设置为0来解决。这几乎解决了所有情况。

不要忘记确保内部元素不会继承，为此，您可以将其设置为“line-height：initial”。

.outer {
        background: grey;
        padding: 4px;
        line-height:0;
    }
    .inner {
        display: inline-block;
        background: cyan;
        height: 40px;
        width: 40px;
        line-height:initial;
    }

空跨度导致奇怪的边距/填充

4 个答案: