javascript - マージンレフトが機能している間、CSSマージントップがDIVで機能しない

Question

重複の可能性：
このCSSマージントップスタイルが機能しないのはなぜですか？

2つの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);

なぜこれが起こるのですか？

Answer 1

overflow: hidden;赤にを設定すると、<div>それを修正する必要があります