CSS 边距在我的 HTML 中没有按预期工作答案

【问题标题】：A CSS margin does not work as expected in my HTMLCSS 边距在我的 HTML 中没有按预期工作
【发布时间】：2020-03-20 04:01:09
【问题描述】：

div {
  border: 1px solid black;
}

.div1 {
  height: 600px;
  width: 600px;
}

.div2 {
  height: 300px;
  width: 300px;
  margin-right: 0px;
  margin-top: 0px;
}

.div3 {
  height: 150px;
  width: 150px;
  margin-left: 0px;
  margin-bottom: 0px;
}

<div class="div1">
  <div class="div2">
    <div class="div3">
    </div>
  </div>
</div>

在上面的代码中我有一个困惑，因为在上面的代码中，边距没有受到内部 div 标签的影响。可能是什么问题？

Image of output

而我想做的是

Desired output

【问题讨论】：

LearnLayout.com
您误解了边距。底部边距：0；不会将 div 放在它所在位置的底部。我肯定会查看@Paulie_D 发布的链接。
您应该检查下面的 4 个答案并解决您的问题，但我建议您在尝试之前学习 CSS 布局和位置。
好吧，如果您一直被否决，而不是乞求理解，也许您可以尝试提出更好的问题，不是吗？
it cause me banned for 2-3 days for asking a new question so please help and thank in advance. --> 在这 2/3 天内，您可以阅读一些教程来了解 HTML/CSS 的工作原理

标签： html css

【解决方案1】：

无需使用margin，只需使用position 属性即可。

这是片段。

div {
  border: 1px solid black;
}
.div1 {
  height: 600px;
  width: 600px;
  position: relative;
  margin: 30px auto;
}
.div2 {
  height: 300px;
  width: 300px;
  position: absolute;
  top: 0;
  right: 0;
}
.div3 {
  height: 150px;
  width: 150px;
  position: absolute;
  bottom: 0;
  left: 0;
}

<div class="div1">
    <div class="div2">
        <div class="div3"> </div>
    </div>
</div>

【讨论】：

【解决方案2】：

要实现所需的带边距的 o/p，这应该是您的代码

div {
        border: 1px solid black;
    }

    .div1 {
        height: 600px;
        width: 600px;
    }

    .div2 {
        height: 300px;
        width: 300px;
        margin-left: 300px;
        margin-top: 0px; 
    }

    .div3 {
        height: 150px;
        width: 150px;
        margin-left: 0px;
        margin-top: 150px;
    }

但是，这将是一个错误的方法，正确的方法是操纵内部 div 向左或向右定位。这是因为盒子模型的概念。您了解有关 box-model 的更多信息，以更好地了解何时使用 margin-l/r/t/b 以及何时使用定位

正确代码：

div {
            border: 1px solid black;
        }

        .div1 {
            height: 600px;
            width: 600px;
            position : relative;
        }

        .div2 {
            height: 300px;
            width: 300px;
            position : absolute;
            right : 0;
        }

        .div3 {
            height: 150px;
            width: 150px;
            position : absolute;
            bottom : 0;
        }

【讨论】：

【解决方案3】：

您可以在组合中使用float 和position: relative/absolute 设置的组合，并使用下面显示的设置来实现图像中显示的所需结果。

注意：所有这些都与边距无关。

div {
  border: 1px solid black;
}

.div1 {
  height: 600px;
  width: 600px;
}

.div2 {
float: right;
position: relative;
  height: 300px;
  width: 300px;

}

.div3 {
  height: 150px;
  width: 150px;

  position: absolute;
  bottom: 0;
  left: 0;
}

<div class="div1">
  <div class="div2">
    <div class="div3">
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

您可以使用position: absolute;，然后使用left 或top 或bottom 代替margin-left 或margin-top

div {
            border: 1px solid black;
        }

        .div1 {
            height: 600px;
            width: 600px;
            position: relative;
        }

        .div2 {
            height: 300px;
            width: 300px;
            right: 0px;
            top: 0px;
            position: absolute;
        }

        .div3 {
            height: 150px;
            width: 150px;
            left: 0px;
            bottom: 0px;
            position: absolute;
        }

    <div class="div1">
        <div class="div2">
            <div class="div3">
            </div>
        </div>
    </div>

希望对你有帮助

【讨论】：