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上设置一个明确的宽度（您已这样做）。