保证金上的孩子和父母的边界

我有一个小孩子的盒子。孩子有余量。如果我在父项（div.box）上设置了边框，则元素的高度将更改，如下图所示。诀窍在哪里？保证金上的孩子和父母的边界

.box { 
 
    background: #0F3; 
 
    border: 1px solid #000; 
 
} 
 
.box-border { 
 
    background: #0F3; 
 
} 
 
.text { 
 
    margin: 40px; 
 
}

<div class="box"> 
 
    <div class="text">Content</div> 
 
</div> 
 

 
<div class="box-border"> 
 
    <div class="text">Content</div> 
 
</div>

来源

2016-02-12 Marko

你是什么意思奇怪的看法？可能是这会帮助你:) http://stackoverflow.com/questions/35337043/when-i-try-to-shift-the-image-upwards-using-negative-margin-the-whole-container/35337103# 35337103 –

也许你必须看到这个http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element – BBeta

你有没有看到printscreen？...一旦框有边界... – Marko

你所面临的问题是所谓的崩溃边缘。

家长和第一/最后一个子
如果无边框，填充，内嵌的内容，或者间隙块的上边距从它的第一子块的上边距分开，或没有边框，内边距，内嵌内容，高度，最小高度或最大高度以将块的边缘底部与其最后一个子块的边缘底部分开，则这些边距将折叠。 折叠保证金在父母之外结束。
[源MDN重点煤矿]

如果你想防止元件上的崩溃边缘没有边界，你可以在这里看到其他的方法：How to disable margin-collapsing?。

浮子父
变化父显示属性内联块或position:absolute;
设置父的溢流到hidden
...

例与overflow:hidden;：

.box { 
 
    background: #0F3; 
 
    border: 1px solid #000; 
 
} 
 
.box-border { 
 
    background: #0F3; 
 
    overflow:hidden; 
 
} 
 
.text { 
 
    margin: 40px; 
 
}

<div class="box"> 
 
    <div class="text">Content</div> 
 
</div> 
 

 
<div class="box-border"> 
 
    <div class="text">Content</div> 
 
</div>

来源

2016-02-12 09:10:54

保证金上的孩子和父母的边界

回答

相关问题