为什么外部填充底部和/或边缘底部？

这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

为什么外部填充底部和/或边缘底部？

回答

相关问题