爲什麼利潤率崩潰影響背景圖像？

我有簡單的HTML和CSS如下。我注意到.outside框和.inside框之間的底部邊距崩潰。 我不明白爲什麼我看不到背景圖像時底部邊距崩潰，背景圖像應該沒有關於邊距。謝謝:)爲什麼利潤率崩潰影響背景圖像？

<div class="outside"> 
<div class="inside"> content </div> 
</div> 


.outside {background:url(http://blurfun.com/temp/images/bottom.png) left bottom no-repeat; padding-top:1px;} 

.inside { background:#00CCFF; margin:0 0 10px 0; padding:0 0 20px 0;}

來源

2013-02-21 blurfun

使用'背景image'代替'background' – jjj 2013-02-21 01:44:00

您正在試驗的嵌套的div之間的垂直邊距崩潰包含此overflow屬性（不等於可見光會做工作的任何值），它會工作正常

.outside { 
     background:#ff0000 url(http://blurfun.com/temp/images/bottom.png) left bottom  no-repeat;  
padding-top:1px; 
     overflow:hidden; 
    }

紅色僅用於測試結果。當然你可以擦。

你外面的div使用在其左下方一種黃色條的詳細評論。

您的內部div的底部邊距爲10 px，因爲此邊距與外部的div底部邊距之間沒有任何內容。這就是爲什麼他們正在崩潰。

您可以防止發生這種情況，包括底部填充或甚至底部邊框到外部div。但是這會改變你的設計意圖。

這就是爲什麼我建議使用溢出屬性，這也可以防止垂直邊緣崩潰，不會干擾您的設計。

在這fiddle我添加了一個左邊距到內部div和紅色背景到外部div。

對於教誨porpouse我還包括一個透明背景的內部股利。

垂直邊距倒塌

Vertical Margins collapsing

通過溢出防治：隱藏

Prevented by overflow:hidden

播放它。刪除溢出屬性並觀察垂直邊緣摺疊。我希望你已經夠清楚了。

有一個好的一天，享受你的編碼:-)

來源

2013-02-21 02:22:44 Fico

爲什麼使用溢出：隱藏可以顯示背景圖片了嗎？ – blurfun 2013-02-21 03:41:11

Hy。我剛剛回復您的評論時回覆了答案。我還包括一個jsFiddle。 – Fico 2013-02-21 12:21:52

爲什麼利潤率崩潰影響背景圖像？

回答

相關問題