html – 为什么margin-top无法使黄色框变亮？

发布时间：2020-12-14 23:30:21 所属栏目：资源来源：网络整理

导读：参见英文答案 Why does this CSS margin-top style not work?11个不要介意注释掉的行.我正在尝试使用盒子模型,但似乎无法弄清楚为什么我不能使用margin-top将黄色盒子放下一点？我可以使用margin-left让它向右移动,这对我来说似乎很奇怪…谢谢. 我想明白为

参见英文答案 > Why does this CSS margin-top style not work?11个
不要介意注释掉的行.我正在尝试使用盒子模型,但似乎无法弄清楚为什么我不能使用margin-top将黄色盒子放下一点？我可以使用margin-left让它向右移动,这对我来说似乎很奇怪…谢谢.

我想明白为什么会这样:)

.largebox {
    width: 800px;
    height: 350px;
    background-color: #00f;
    //padding-left: 50px;
    margin-left: 10px;
    //border: 2px solid black;
}

.box1 {
    width: 250px;
    height: 300px;
    background-color: #ff0;
    //display: inline;
    //float: left;
    //margin-right: 0px;
    margin-left: 50px;
    margin-top: 25px;
 }

<div class="largebox">
        <div class="box1"></div>

    </div>

解决方法

这是由于 margin collapsing发生的 – 所以边框,填充到父元素或内联内容(任何内联元素)将关闭边距折叠.

见下面的演示：

.largebox {
  width: 800px;
  height: 350px;
  background-color: #00f;
  margin-left: 10px;
  border: 1px solid; /*ADDED THIS*/

}
.box1 {
  width: 250px;
  height: 300px;
  background-color: #ff0;
  margin-left: 50px;
  margin-top: 25px;
}

<div class="largebox">
  <div class="box1"></div>

</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!