爲什麼外部填充底部和/或邊緣底部？

這jsFiddle說明了這個問題是指什麼（下面的完整代碼）。請注意，儘管#outer-div應具有0 padding，並且#inner-div應具有0 margin-bottom，但看起來好像在#outer-div和#inner-div的底部邊緣之間存在一些填充和/或餘量。爲什麼外部填充底部和/或邊緣底部？

這是從哪裏來的，更重要的是，我該如何抑制它？

CSS

html,body,div{margin:0;padding:0;border:0;outline:0} 
body{background:white;} 
#outer-div{ 
    background:lightgray; 
    margin-top:20px; 
    text-align:center; 
} 
#inner-div{ 
    background:black; 
    display:inline-block; 
}

HTML

<!doctype html> 
<body> 
<div id="outer-div"> 
    <div id="inner-div" style="background:black;width:100px;height:100px;"> 
    <div style="background:orange;margin:1px;width:96px;height:96px;padding:1px;"> 
     <div style="background:white;margin:1px;width:94px;height:94px;"></div> 
    </div> 
    </div> 
</div>

來源

2013-11-01 kjo

內聯元件對空白敏感，間隙被保留用於伸元件。添加vertical-align:top至＃內的div是解決這一問題的一種方法：

#inner-div { 
    background:black; 
    display:inline-block; 
    vertical-align:top; 
}

jsFiddle example

的第二種方式是設置font-size:0父元素在此jsFiddle example。

來源

2013-11-01 01:28:46 j08691

另一種方法是降低樣式元素中的內部div集合的高度 –

@LiamSorsby - 你測試了嗎？ – j08691

謝謝！很高興能夠學習如此出色的答案。然而，令人驚訝的是，我發現答案也是令人沮喪的，因爲它讓我相信我永遠不會掌握CSS：就像我的小腦袋一樣，有太多令人困惑/不可預知的怪癖。我使用'display：inline-block' *僅僅是因爲*它是唯一的* CSS伏都教*我可以找到一個'div'在另一個'div'中。你的回答讓我意識到''display：inline-block'帶來了所有這些其他意想不到的包袱，而我害怕下一個奇怪的怪癖（當然是在截止日期前一天晚上）... – kjo

爲什麼外部填充底部和/或邊緣底部？

回答

相關問題