保證金上的孩子和父母的邊界

我有一個小孩子的盒子。孩子有餘量。如果我在父項（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

保證金上的孩子和父母的邊界

回答

相關問題