《各浏览器对 ‘display’ 特性值的支持程度不同》

二、inline-block 今生1. display:inline-block 后的元素为什么会产生水平空隙,这真的是 bug 吗?
这么一个神奇的属性,为何大家一直避而远之呢?这恐怕还得从 inline-block 元素之间产生的水平空隙(间隙)说起吧。
现代浏览器中 inline 和 block 元素 display:inline-block 后均会产生水平空隙;
IE6、7,IE8(Q)模拟 display:inline-block 后分两种情况:
IE6、7,IE8(Q)中:inline 元素会产生空隙,block 元素不会产生空隙。
看看 inline 元素默认的表现情况如何?原来默认就有空隙存在!它们是谁?是空白符(white space)!

W3C 9.1 White space 中规定以下元素属于空白符(white space):
ASCII 空格 ( )ASCII 制表符 ( )ASCII 换页符 ()零宽度空格 ()「这个在闭合浮动中也有运用到」
9.3.2 Controlling line breaks 中进一步阐述:
A line break is defined to be a carriage return ( ), a line feed ( ), or a carriage return/line feed pair. All line breaks constitutewhite space.
For more information about SGML’s specification of line breaks, please consult the notes on line breaks in the appendix.
折行被定义为一个回车符( ),一个换行符 line feed ( ),或者一个回车、换行的组合。所有的折行构成了空白符。
有关 SGML 规范中折行的更多信息,请参阅附录中关于折行的注释。
通常情况下,对于多个连续的空白符(空格,换行符,回车符等),浏览器会将他们合并为一个空白符。CSS 中由 white-space 这个属性来控制:
white-space:normal | pre | nowrap | pre-wrap | pre-line
默认值:normal
normal:默认处理方式。pre:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅 pre 对象nowrap:强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。pre-wrap:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。pre-line:保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。










