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

display：none | inline | block | inline-block | table | inline-table |··········|·····

首先先说点名词 :
- 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 元素将会自动转换为block元素, 只不过这个block由于浮动或脱离文档流的原因，导致该block前后换行符失去了效果，所以容易被误认为inline-block元素。

---

细说区别：

• block
  （1）能设置宽度：处于常规流中(即position:static/relative) ，若width没有设置，会自动填充满父容器。
  （2）能设置高度：若height没有设置，则高度会扩展以包含常规流中的子元素
  （3）margin/padding水平垂直方向都有效。
  （4）前后都会有换行符

注意：如果将block或inline元素设置为 position:absolate/fixed 或 float后，block或inline 将会自动转换为block元素 (由于浮动或脱离文档流的原因，导致该block前后的换行符失去了效果，所以有些人误认为是转化为了inline-block)
因而此时若某block元素没有设置width，则会扩展宽度以包含常规流中的子元素

• inline
  （1）设置width无效，且会扩展宽度以包含常规流中的子元素
  （2）设置height无效，且会扩展高度以包含常规流中的子元素
  （3）margin在竖直方向上无效，水平方向上有效;padding水平垂直方向都有效。
  （4）前后无换行符

• inline-block
  （1）能设置宽度：在任何流中，若width没有设置，则宽度会扩展以包含常规流中的子元素
  （2）能设置高度：若height没有设置，则高度会扩展以包含常规流中的子元素
  （3）margin/padding水平垂直方向都有效。
  （4）前后无换行符

---

inline-block间隙问题：

用inline-block经常会产生间隙(依浏览器不同而定)，间隙产生的原因：
inline-block 元素间 有空格或是换行符,它们占据一定的位置。点击下面链接，看看怎么解决的~
链接：去除inline-block元素间间距的N种方法

---