Div不會占用iframe的高度

Question

請參考此http://jsfiddle.net/7wt8L/1/

我嘗試將iframe嵌入未指定高度的div中。 我希望iframe可以填充div，但是div的底部有一些空間。

我確實知道如何使div占用iframe的高度，但是我很好奇為什么當我不指定黃色div的高度時，黃色div的底部會有空格。 我還有些困惑，為iframe提供了display:block屬性，它也允許div占用iframe的高度。

Answer 1

display: inline iframe display: inline默認為display: inline 。 內聯元素可能受很多因素影響，包括line-height ， vertical-align等。嘗試在iframe的父級上將line-height設置為0，您會看到空白將消失。 http://jsfiddle.net/7wt8L/2/

如果您不希望那些面向文本的屬性影響您的元素，請使用display: block; 代替。

Answer 2

默認情況下，iframe display inline 。

因此，如果要margin: auto; （因為尚未設置邊距，因此默認情況下其margin : auto ），則需要添加display: block ; 也一樣

同樣，為了使自動頁邊距正常工作，必須在iframe上設置一個明確的寬度（您已這樣做）。