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