在我们开发网站过程中，这个display用的太多了，几乎每一个div和san都要用到这个display，这不，万书涛在开发个人博客模板时就遇到这个问题，代码演示如下：
我是用了一对<span></span>标签，写法如下：<span class="wstformsz">文字填写：<input type="text" name="wsttoptxt" value="欢迎光临万" /></span>，然后后面紧跟着 <label>这里主要是填写你的博客名字</label>，效果是想让span后面紧跟label说明。
本来span标签就是行内元素，没必要用display属性，可是默认我想给span设置高度，怎么设置也不起作用，如下图一
上图中红色箭头可以看出，默认什么都不加，height都到了125px了，左边红色箭头高度根本没有变，后来修改了width宽度也是不行，于是马上想到了display:block属性，这个是默认让span变成块级元素，会独占一行，要想让别的元素和他一行，就得设置float:left，可是这样一浮动，后面别的元素格式可能会乱，还要清浮动什么的，比较繁琐。
于是就试了试 display:inline-block，发现这个起作用了，原来这个属性是表示行内块元素，即有块级元素的width，height等属性，也能和别的元素共处与一行中。效果如图二
如上图二所示，在span元素设置display:inline-block以后，再设置高度就能被撑开了。
总结如下：经过实际操作以及结合官方资料，display各个属性区别如下：
inline：行内元素，拥有行内元素的特性，即与其他行内元素可以共处于一行中，但是width，height等属性不起作用，而针对本例中的span元素的padding属性 只有左右有效果，其他上下无效果；同样margin属性也只有left、right设置有效。
block和inline-block都是块级元素，width和heigth都有效，并且padding和margin也都有效，不同的是inline-block这个块元素可以和行内元素处于一行之中，而block却是单独一行。
PS：本文来自万书涛的个人博客，感谢分享。
我是用了一对<span></span>标签，写法如下：<span class="wstformsz">文字填写：<input type="text" name="wsttoptxt" value="欢迎光临万" /></span>，然后后面紧跟着 <label>这里主要是填写你的博客名字</label>，效果是想让span后面紧跟label说明。
本来span标签就是行内元素，没必要用display属性，可是默认我想给span设置高度，怎么设置也不起作用，如下图一
上图中红色箭头可以看出，默认什么都不加，height都到了125px了，左边红色箭头高度根本没有变，后来修改了width宽度也是不行，于是马上想到了display:block属性，这个是默认让span变成块级元素，会独占一行，要想让别的元素和他一行，就得设置float:left，可是这样一浮动，后面别的元素格式可能会乱，还要清浮动什么的，比较繁琐。
于是就试了试 display:inline-block，发现这个起作用了，原来这个属性是表示行内块元素，即有块级元素的width，height等属性，也能和别的元素共处与一行中。效果如图二
如上图二所示，在span元素设置display:inline-block以后，再设置高度就能被撑开了。
总结如下：经过实际操作以及结合官方资料，display各个属性区别如下：
inline：行内元素，拥有行内元素的特性，即与其他行内元素可以共处于一行中，但是width，height等属性不起作用，而针对本例中的span元素的padding属性 只有左右有效果，其他上下无效果；同样margin属性也只有left、right设置有效。
block和inline-block都是块级元素，width和heigth都有效，并且padding和margin也都有效，不同的是inline-block这个块元素可以和行内元素处于一行之中，而block却是单独一行。
PS：本文来自万书涛的个人博客，感谢分享。
