HTML / CSS-2列布局，右側的上邊距也會影響左側

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>

問題是margin-top：10px; 在右側也向下推左側。 我在這里想念什么？ 這是預期的嗎？ 我想分別調整左側和右側的上邊距屬性

Answer 1

這被稱為邊距折疊，實際上發生的是，因為外部div（ width:200px ）為空，它使用其子級邊距並使用它來代替子級。因此，容器被向下推10px，並且由於左/正確的div也在其中，它們也會移動。

“表述邊緣塌陷是指兩個或更多盒子（可能彼此相鄰或嵌套）的相鄰邊緣（沒有非空內容，填充或邊框區域或間隙將它們隔開）組合在一起形成一個邊緣。”

如果你給它一個邊界，你會看到它的工作如預期.. 演示

Answer 2

您可以做幾件事。 發生的情況是右div的邊距正在影響兩個div的包含div的位置，這就是將左div向下推的原因。 我相信這是預期的行為。 這些都可以工作：

1. 將包含的div設置為float: left
2. 通過在包含的div或左側的div上設置-10px的邊距來對付右div。

Answer 3

嘗試浮動包裝兩列的div和右側div