Question

我不明白为什么下面的代码会在黄色div下面创建一个边距？以下代码是HTML5（请参阅doctype）。如果您删除了doctype，那么它不是HTML5，那么就没有边距（我喜欢）。关键是这段代码必须是HTML5（这是我的要求）。黄色div也必须有宽度：300px（这是我的要求）。

鉴于这种情况，如何摆脱黄色div下方的保证金？

<!DOCTYPE html>
<html>
<body>
    <div style="background-color:#00f;">
        <div style="display:inline-block;width:300px;background-color:#ff0;">
            <div style="float:left;">Hello</div>
            <div style="float:right;">World</div>
        </div>
    </div>
</body>
</html>

您可以在https://jsfiddle.net/gscz9ahq/

上查看以上代码

你在这里预览：

我尝试过使用“clear：both;”没有成功。

关于如何解决这个问题的任何想法？您可以修改jsfiddle代码以使其正常工作吗？

Answer 1

创建空间的是display: inline-block;。但是你的html有点偏，你需要在使用float时清除div。

check the fiddle

<div style="background-color:#00f;">
  <div class="clearfix" style="width:300px;background-color:#ff0;">
    <div style="float:left;">Hello</div>
    <div style="float:right;">World</div>
  </div>
</div>

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

Answer 2

致<div style="display:inline-block;width:300px;background-color:#ff0;"> div添加vertical-align: top;

在HTML5上使用float时，在div底部的边距

2 个答案: