行内元素和块级元素的区别，为何img、input等行内元素可以设置宽高??（夯实基础）

我们习惯将html中元素分类为行内元素和块级元素，如下：

·常见块级元素有：html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等；

·常见行内元素有：span、a、img、textarea、button、input、br、label、select、canvas、progress、cite、code、strong、em、audio、video等

扫描二维码关注公众号，回复： 2235827 查看本文章

而他们明显的区别是：

·块级元素：会自动换行，在横向充满其父元素的内容区域，默认独占一行的，可修改宽高；

·行内元素：不会自动换行，行内元素左右可以有其他元素，行内元素的宽高大多是auto*auto。；

·注意：行内元素设置宽高无效（但是行内置换元素可以设置宽高，下面有详细解释）、设置上下margin无效，设置上下padding类似无效（不影响文档流排列）

   < div style = "border:1px solid red;width:400px;" > 设置块级元素的宽，依旧会自动换行，因为它要独占一行 </ div >

   < span style = "border:1px solid purple;width:200px;height:25px;" > 行内元素设置宽高无效 </ span >

   < span style = "border:1px solid blue;margin:20px;" > 行内元素设置上下的margin无效 </ span >

   < span style = "border:1px solid blue;padding:20px;" > 行内元素设置上下的padding也无效 </ span >< br >

   < div > 块状元素多行多行文字，块状元素多行多行文字，块状元素多行多行文字，块状元素多行多行文字，块状元素多行多行文字，块状元素多行多行文字 </ div >

行内元素怎么样可设置宽高

当然使用display:block;和display：inline-block;样式可以实现转换为块级元素和行内块级元素（可设置宽高的行内元素），行内元素还可以通过添加float来设置宽高，因为不论什么元素本身是什么，当它浮动时就会生成一个块级框；

      < span style = "display: inline-block;width:400px;height:60px;border:1px solid blue;" > 当使用display：inline-block；后，行内元素可以设置宽高 </ span >

      < span style = "display: block;height:60px;border:1px solid purple;" > 当使用display:block;行内元素转为块级元素 </ span >

      < span style = "float: left;width:400px;height:60px ;border:1px solid orangered;" > 使用float，任何元素自身会生成一个块级框，这是因为触发了BFC </ span >

但是还有另外一种分类方式：可替换元素和不可替换元素的分类

·替换元素：替换元素根据其标签和属性来决定元素的具体显示内容，<img><input><textarea><select><object>等。替换一般有内在尺寸如img默认的src属性引用的图片的宽高，表单元素如input也有默认的尺寸。img和input的宽高可以设定。

· 不可替换元素：即将内容直接表现给用户端。

·注意：几乎大部分的替换元素都是行内元素，所以说如input、img、textarea是行内元素但是是可以设置宽高的说法。

   < button style = "width:200px;" > 测试按钮 </ button >

   < img src = "http://www.runoob.com/images/compatible_opera.gif" alt = "" style = "border:1px solid red; width:30px;height:30px;" >