display常用属性及inline元素之间的空白和padding的问题

本文主要对display 的几种最常用的方法进行了分析，分别为none，block，inline-block，inline，inherit。

其中主要分析了inline时，两个连续行内元素之间出现空白，以及行内元素占据空间等问题。

W3C规定：
display 属性规定元素应该生成的框的类型。
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

W3C规定的display的属性值有很多（有兴趣的可以自己查下），其中在平时的开发布局中，最常用的包括：none，block，inline-block，inline，inherit。

下面分别说一下这几个属性值的表现：

一：display=none
这是display最基本的属性，元素被隐藏，这个时候，元素脱离文档流，不在页面的显示界面占据空间。
说到元素隐藏，就会想到隐藏元素的另外一个方法：visibility=hidden，它与display隐藏元素的最大区别就是，它虽然在界面是不可见的，可事实是，它依旧在显示界面占据空间。
它们之间的差别，也导致了它们对浏览器的重绘(repaints)和重排(reflows)有着不同的影响，对于一个元素，如何实现其功用，并且减少浏览器的repaints和reflows，那就按照具体情况进行处理吧，这里不多说了。


注：根据我现在的理解，说一下repaints和reflows，在浏览器渲染页面的过程中，其中有两个过程生成了DOM树和渲染树，如果一个元素的变化，影响到了DOM树，就会导致reflows，如果没有影响DOM树，只是影响了渲染树，那就是repaints，所以呢，reflows必定会导致repaints。

二：display=block
元素按照其显示，可以分为两种：行内元素和块级元素。
块级元素就很像一个领主，我的领土，不允许其他的领主碰触，我占据的领土只允许我自己的子民生活。是不是很霸道？好吧，你是不是要说浮动和定位？浮动人家是领主的家人，定位更是有着搞过领主的身份，都是有特权的，就占你的位子，你有毛办法，那么领主为了子民的正常生活（元素显示），只能把被别人占据的给让出来呗。所以啊，有时候为了生活，就不得不委曲求全，就不得不低头。
display=block就是把元素设置成为块级元素，块级元素的特性就是，在块级元素的前后都会有换行符。
注意：块级元素会自动的继承一部分父元素的属性，比如：text-align,color,font等.
大体上面，可以总结一下适用的规律，如果一个属性的变化会导致DOM树变化（reflows），那么就不会被继承，如果只影响了渲染树（repaints）。
这只是一个比较不严谨的说法，虽然大多数属性都符合，也有例外的，
例如：background属性，低版本的ie，是会继承background的，高版本的ie和其他主流浏览器，都不会继承background属性。

在这里有个特例，width属性，如果没有设置这个width属性，那么子块元素的宽度是和父块元素相同的，但是这不是继承，这是因为块级元素的本身的性质，它会占据所能占据的最大宽度。

三：display：inline
行内元素很显然就是，可以在同一行显示。
行内元素是无法设置height，width属性的(ie6-是可以设置的，唉)，它只会按照它的内容，选择合适的height和width。

解决方法：
1：height的一个解决方法就是设置line-heigth了。
 注：有个问题就是，line-height是会被子元素继承的。

W3C中，line-height的定义
line-height 属性设置行间的距离（行高）。
该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
所以，如果一个元素还有其他子元素的话，还是尽量不要用line-height了。容易出乱子。

2：内外边距方法：

行内元素不可以设置上下外边距的，可以设置左右的外边距，内边距都可以设置。

想想行内元素在普通流中使用，会有些许的差异存在呢？

<style type="text/css">*{margin:0px;padding:0px;}#zyl{width:960px;height:50px;border:1px solid #aaa;overflow:hidden;margin:20px;}.a{background:#876;}.c{border:1px solid #bbb;}</style>

<div id = "zyl"><a class = "a">jkh</a><a class = "a">jkh</a><div class = "c">asdf</div></div>

思考一下，这段代码会显示成什么样子？

注意一下，这几个图片的a标签上下(红色标注部分)，谷歌上下都有1px的空白，火狐上边有1px空白，ie（各浏览器）都没有着1px的空白。这个浏览器之间的差异也太明显了吧，谁知道这个有没有解决办法，请求指教！

并且可以看出，在这三种浏览器下，a标签的在其右侧都有一个空白区域，大小为8px。

下面再看另外一个情况
把上面的代码只改动一点：

<div id = "zyl"><a class = "a">jkh</a><a class = "a">jkh</a><div class = "c">asdf</div></div>

想想这个时候，页面的显示吧！

再看一种情况

<div id = "zyl"><a class = "a">jkh</a><a class = "a">jkh</a><div class = "c">asdf</div></div>

这个时候的页面显示呢？

所以呢，为了以后能够让你写的代码显示的更标准，不用为了其他各浏览器的兼容，再搞css其他的css弥补，对于行内元素，还是老老实实的写吧，就是没事不要换行，虽然换行之后，代码看起来更有层次性。

当然，如果你想要代码看起来更有层次感，也是有很多方法可以做到的，看一下这篇文章吧去除inline-block元素间间距的N种方法

说完上面这个问题，再看另外一个问题。行内元素的padding：

直接看例子呗：

*{margin:0px;padding:0px;}#zyl{width:960px;border:1px solid #aaa;margin:20px;}.a{background:#876;padding:10px;}

<div id = "zyl"><a class = "a">jkh</a></div>

这个时候，页面是怎么样呈现的呢？

ie7-显示还好，其他的显示就。。。这个时候，你会不会以为ie7前的版本中，行内元素是不支持上下内边距的设置的？

那就再看一个例子吧。

*{margin:0px;padding:0px;}#zyl{width:960px;border:1px solid #aaa;margin:20px;}.a{background:#876;padding:10px;}.c{border:1px solid #bbb;background:#efefef;}

<div id = "zyl"><a class = "a">jkh</a><div class = "c">abc</div></div>

这个时候，你觉得会出现什么情况呢？

ie7前的浏览器也出现问题了，这就说明了，ie7之前的行内元素事实上是可以设置上下内边距的，只是在超出了其父元素的范围之后，被隐藏了（可以这么认为吧，它自身就携带了overflow=hidden的属性）。这个时候就要注意了，如果你没有设置line-height属性，就设置了padding，很可能会影响到其他的兄弟元素的，如果父元素没有overflow设置成hidden，父元素的兄弟元素也会受到影响的，所以呢，对于行内元素，能不设置上下边距的padding，就不要设置了。

由上面说的这么多，我们可以总结一下，行内元素的尺寸是怎么形成的吧。
宽度：margin+border+padding+contentwidth。contentwidth只跟内容的真实宽度，或者说，子元素的最大尺寸有关。
高度：要么是内容的真实高度，要么是line-height设置的高度。还有就是加上文章前面提到的，行内元素上下一个像素的空白区域（各浏览器表现还有些差别）。它占据的高度，和margin，border，padding，height都无关。。。。

注：2013.12.12：行内元素的实际高度根本上还是由内容决定，如果你没有通过设置line-height设置行内元素的高度的话，还是尽量不要用上下的内边距了，因为这个时候使用，会出现上面说过的那种情况，可以参看上图显示。


四：display=inline-block
一个特殊的属性值，按一个行内元素显示在页面，不过却可以设置上下的外边距和内边距，border等，可以设置height，width等，换句话说就是：长得像大灰狼的一只羊。
这个也没有什么特别好说的，同样会出现和inline一样，右侧出现8px空白的情况，原因也是一样的，注意html代码的书写即可，还有就是低版本ie没有这个属性，不识别，则元素的显示方式就会被解析成元素的默认属性，block或者inline。这也会出现两种情况，默认为inline属性的行内元素，设置成inline-block倒是没有什么（虽然不起作用，但是却让元素拥有了布局，可以用来清理浮动），ie低版本就算是inline属性，也是可以设置width和height的，所以影响不大。默认属性为block的，设置成inline-block就有些问题了，因为block的前后换行符，导致整个样式完全变了。注意呀！！！


五：display=inherit
这个吧，继承其父元素的display属性，就是之前说的这几种了，这个吧，很少见到在哪用的。


就说这么多吧，有问题欢迎提出指正，大家交流学习，共同进步哈！