Question

说我并排有3个div：

<body>
    <div id="ok1">Content for  id "ok1" Goes Here</div>
    <div id="ok2">Content for  id "ok2" Goes Here</div>
    <div id="ok3">Content for  id "ok3" Goes Here</div>
</body>

然后我向其中一个申请保证金：

#ok1 {
    display: inline-block;   
    margin-top: 20px;
}

#ok2 {
    display: inline-block; 
}

#ok3 {
    display: inline-block;
}

为什么这三个人都获得了最高保证金？

Answer 1

这是因为两个div与第一个内联。当你执行display: inline-block;时，它将其他两个div移动到第一个块中。

如果你把它拿出来，它会恢复正常。

fiddle

感谢@MosheKatz关于内联块的想法

Answer 2

在元素之间建立了内联格式化上下文，因此以下内容适用：

9.4.2 Inline formatting contexts （w3.org）

在内联格式化上下文中，框从水平排列，一个接一个，从包含块的顶部开始。这些框之间会考虑水平边距，边框和填充。盒子可以以不同的方式垂直对齐：它们的底部或顶部可以对齐，或者它们内的文本的基线可以对齐。包含形成一条线的框的矩形区域称为线框。

vertical-align元素的默认inline值为baseline。

您可以将此值更改为top，从而更改结果(example)

div { vertical-align:top; }

为什么div的上边距会移动多个div？

2 个答案: