【前端】iframe是inline元素，inline元素也可以设置尺寸

起源：html5文档规范，框架中tab组件里使用url定义内容时，出现了双层滚动条。而使用html 4.01 transitional则无此现象。

简化代码后，div（overflow:auto）中放置一个iframe，宽高均设为100%，就会出现滚动条，iframe下表现出一小段留白。这个现象曾经出现在<img>标签上，基本是源于inline或inline-block元素的默认vertical-align为baseline。解决办法是：display:block 或 vertical-align:top。

到此这个问题已经解决，但是审查元素的时候，不小心看到<iframe>默认的display是inline，而不是inline-block，再深究，甚至连<img>也是inline的。

一直以来都认为<img>是inline-block的元素，因为它允许设置宽高。而<span>之类的inline元素是不支持尺寸的设置的。但为什么审查元素时看到的默认样式是inline呢？

这里就需要引入另一个概念：替换元素，就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。

html中的img , input , textarea , select , object, iframe等都是替换元素。

- img元素通过src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，却看不到图片的实际内容，而且img元素的内容通常会被src属性指定的图像替换掉；
- input元素的type属性决定是显示输入框，还是单选按钮等。

使用CSS的content属性插入的对象是匿名替换元素。

以上这些元素都没有实际的内容。

与之相对的，其他元素被称为非替换元素，行内非替换（inline no-replace ）元素的宽是不确定的。

=======================举 栗 子=======================

示例以HTML5规范展现

<div style="background: #f00;">
<input class="el" type="button" value="替换元素" />
</div>
<p></p>
<p></p>
<div style="background: #f00;">
<span class="el">非替换元素</span>
</div>

替换元素可以设置尺寸：

.el{
height:50px;
background:#ff0;
}

非替换元素设置padding不会影响父元素的尺寸：

el{
padding:10px;
background:#ff0;
}

=======================小 贴 士=======================

要想替换元素居中，可以设置：

line-height = height

或

vertral-align = middle

要想消除inline或inline-block元素下方的留白，可以设置：

display:block

或

vertical-align:top|middle|bottom

或为父元素添加样式：

font-size:0