Flash the Future

如果你用firefox�览http://www.sitepoint.com/，那么点击一下中键你会�现这个�图标:而�是Firefox默认的样�。
�研究了一下�现是这么实现的

html>img /* autoscroll overr-de for Firefox */
{
	width: 0!important;
	height: 28px!important;
	padding-left: 28px!important;
	background: url(../images/autoscroll.png);
}

Firefox的默认样�也是一个png图片，它是html的孩�元素。这里把其宽度设0是为了��这个默认png，然�用左边�应用背景，实现自己的样�定义。
�得�说，想法真酷。

Chapter 7. Basic Visual Formatting
inline元素�行的时候，如果有border，两行的上下边框是并排的。上�是第二行的上边框，下�是第一行的上边框
letter-spacing 和 word-spacing 属性将被忽略，如果text-align被设为justified.

�replaced的inline元素的背景是覆盖到padding区域的。padding和border在上下方��会影�到inline box的高度，也就�会影�包�这个inline元素的line-box的高度，maring�有左�方�有效果。CSS2.1在margin上更严格，规定margin-top和margin-bottom�能用于nonreplaced的inline元素，而�是简�的说�览器�以忽略margin-top和margin-bottom。
这些属性会影�到replaced的inline元素的高度。

关于line-height,font-size和inline box,content area,linebox的关系
linebox是一行内容真正��的空间，�个linebox说首尾（上下边缘）相接的。inline box是一行中�个��元素��的空间。linebox的顶端�最高的inline box的顶端，底端�最低的inline box的低端。所以linebox是能够包�本行���样的inline box的最�box。
如图所示，彩色的是���样的inline box，�色的是linebox。

那么具体一个个的inlinebox是如何构�和定�的？
首先line-height定义了inline box的高度，然�font-size定义的是content area，�者�去�者的差值是leading，�正�负，上下�分布一�决定inline box的�置。
比如font-size定义�24px，line-height定义�18px,差值是-6，那么line box的�置就在content area顶端往下数3px的�置开始，高18px。

如图。

�外看看下�一段代�：

<p style="font-size: 12px; line-height: 12px;">
This is text, <em>some of which is emphasized</em>, plus other text<br>

which is <strong style="font-size: 24px;">strongly emphasized</strong>
and which is<br>
larger than the surrounding text.
</p>

效果如下

所有的内容都有line-height:12px，也就是说�个inline box都是12px高了。但是为什么中间一行的linebox�比别的行高呢？这是vertical-align的原因，默认的vertical-align是基线对�的，�默认值是baseline。因此虽然�个inline box高度一样，但是由于按baseline的相对�置��，所以他们其实是�差��的。
具体å?„ç§?vertical-align的规则这里有æ??过

nonreplaced 的inline元素的border是围绕�content area的，由font-size决定，和line-height无关。padding和margin亦然。
line-height 多replaced元素的inline box 没有影�。但是有助于replaced元素的vertical-align计算。
比如这段css定义

p {font-size: 15px; line-height: 18px;}
img {vertical-align: 50%;}

会让p中img自baseline�上移动9px。
和nonreplaced元素��，replaced元素的padding,margin,border会影�其inline box的高度。