为什么margin-top不能使黄色框变黑？ [英] Why does margin-top not work to get the yellow box down?

问题描述

不介意注释掉的行。我正在试验盒子模型，但似乎无法弄清楚为什么我无法使用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; //向左飘浮; // margin-right：0px; margin-left：50px; margin-top：25px; }  

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

解决方案

<由于 strong> margin collapsing - 所以 border ， padding 添加到父元素或内联内容（任何内联元素）将关闭边缘折叠。

请参阅下面的演示：

  .largebox {width：800px; height：350px; background-color：＃00f; margin-left：10px; border：1px solid; / *添加了这个* /}。box1 {width：250px; height：300px; background-color：＃ff0; margin-left：50px; } < div class = largebox > < div class =box1>< / div>< / div>  

Don't mind the commented out lines. I'm experimenting with the box model, but can't seem to figure out why I can't use margin-top to drop the yellow box a bit down? I can use margin-left to get it to move to the right, so that seem weird to me... Thanks.

I'd like to understand why this happens :)

.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>

解决方案

This happens due to margin collapsing - so a border, padding to the parent element or inline content (any inline element) will switch off margin collapsing.

See demo below:

.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>

这篇关于为什么margin-top不能使黄色框变黑？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！