display:inline、block、inline-block的区别

首先先说点名词 :

- inline element：行内元素也叫作内联元素，内嵌元素，直进式元素

- block element：块级元素

block元素：< div>, < p>, < h1>, < form>, < ul> < li>等

inline元素: < span>, < a>, < label>, < input>, < img>, < strong> < em>等

现在进入正题：display:inline、block、inline-block的区别

粗谈区别：

block

block是 块级元素，其前后都会有换行符；

inline

inline是 内联元素（对其设置的宽高都没有什么卵用，不产生效果，但是颜色效果还是有的），前后是没有换行符的。

inline-block

而inline-block恰好是两者的综合，即行内块，其属于块级元素，而且没有换行符,在行内形成。

注：如果将block或inline元素设置为 position:absolate/fixed 或 float后，block或inline 元素将会自动转换为inline-block元素。

细说区别：

block

（1）能设置宽度：处于常规流中(即position:static/relative) ，若width没有设置，会自动填充满父容器。

（2）能设置高度：若height没有设置，则高度会扩展以包含常规流中的子元素

（3）margin/padding水平垂直方向都有效。

（4）前后都会有换行符

注意：如果将block或inline元素设置为 position:absolate/fixed 或 float后，block或inline 将会自动转换为inline-block元素。

因而此时若某block元素没有设置width，则会扩展宽度以包含常规流中的子元素

inline

（1）设置width无效，且会扩展宽度以包含常规流中的子元素

（2）设置height无效，且会扩展高度以包含常规流中的子元素

（3）margin在竖直方向上无效，水平方向上有效;padding水平垂直方向都有效。

（4）前后无换行符

inline-block

（1）能设置宽度：在任何流中，若width没有设置，则宽度会扩展以包含常规流中的子元素

（2）能设置高度：若height没有设置，则高度会扩展以包含常规流中的子元素

（3）margin/padding水平垂直方向都有效。

（4）前后无换行符