Question

这是我的简单标记：

<div style="width:200px">
    <div style="width:50%;float:left;">
        left side
    </div>
    <div style="margin-left:50%;width:50%;margin-top:10px;">
        right side
    </div>
</div>

问题在于保证金最高：10px;在右侧也向下推动左侧。我在这里错过了什么？这是预期的吗？我想独立调整左右顶边距属性

Answer 1

这称为边缘折叠，实际发生的是因为外部div（width:200px）是空的，它需要使用子边距并使用它而不是子节点..所以容器被推下10px由于左/右div在它内部，它们也会移动..

“表达式崩溃边缘意味着相邻的边缘（没有非空内容，填充或边框区域或间隙将它们分开）两个或更多的盒子（可能是下一个相互结合或嵌套）形成一个边际。“

如果你给它一个边框，你会看到它按预期工作.. demo

Answer 2

您可以做一些事情。正在发生的是正确的div的边缘正在影响两者的包含div的位置，这是推动左边的一个。我相信这是预期的行为。其中任何一个都可以工作：

将包含div设置为float: left
计数器通过在包含div或左侧div上设置-10px边距来操作右边的div。

Answer 3

尝试浮动包裹两列的div，以及右侧div

HTML / CSS - 2列布局，右侧上边距也影响左侧

3 个答案: