CSS的 display 中有三个不同的值会影响布局，今天把总结下几个的不同特点。

display: inline

1. 不会加入换行符，可以允许后面有HTML元素挨着。
2. margin-top/bottommargin-top/bottom 失效.
3. padding-top/bottom可以生效,但是不影响空白的空间,所以设置的padding会和其他元素重叠
4. 不能设置width或者height

inline的元素有:

<span>``<a>

display: block

1. 在block后强制换行
2. 可以设置width或者height
3. padding,margin表现正常

block的元素有:

<p>``<div>``<h1>

display: inline-block

1. 像inline一样,允许元素挨在同一行,
2. 可以设置width或者height
3. 像block一样,padding,margin表现正常

例子

以下几张图展现几个不同的display效果:

假如我们在div的一大串文字中,嵌入了一个<span>的文字, 通过设置span的不同display,将有以下效果:

diplay:inline

display:block

display:inline-block

可以认为,display:inline-block就像display:inline一样,但是可以正常的设置高度和宽度等属性.所以我们可以使用display:inline-block替换float,去完成文字环绕.

demo链接