CSS marginTop 不能在 DIV 上工作而 marginLeft 工作 [重复]答案

【问题标题】：CSS marginTop not working on DIV while marginLeft works [duplicate]CSS marginTop 不能在 DIV 上工作而 marginLeft 工作 [重复]
【发布时间】：2012-05-17 07:53:33
【问题描述】：

可能重复：
Why does this CSS margin-top style not work?

假设我有两个 DIV，一个在另一个内部 (DIV1 -> DIV2)，并且我在内部 DIV 上定义了一个 marginTop 属性，它应该在 DIV1 中移动 DIV2。相反，它将 DIV1 和 DIV2 从顶部移动 # 个像素。然而，marginLeft 在 DIV1 中正确移动 DIV2。

    // DIV1
    var x = document.createElement("div");
    x.style.width = "200px";
    x.style.height = "200px";
    x.style.backgroundColor = "red";

    // DIV2
    var y = document.createElement("div");
    y.style.width = "50px";
    y.style.height = "50px";
    y.style.backgroundColor = "black";
    y.style.marginTop = "10px";
    y.style.marginLeft = "10px"

    document.body.appendChild(x);
    x.appendChild(y);

为什么会这样？

【问题讨论】：

@BoltClock 是的，似乎是我的问题 :) 谢谢

标签： javascript css margin

【解决方案1】：

在红色的<div> 上设置一个overflow: hidden; 应该可以纠正这个问题

【讨论】：

是的。我解释了为什么这在我对重复问题的回答中有效。