设置段落首字母浮动于左侧

在学习CSS，当学到css的分类时，有个练习的实例，就是标题所说的 设置段落首字母浮动于左侧 的实例。因为无编程基础，对于css的学习基本处于死记硬背的阶段，对一些基本概念的理解几乎都是自己探索出来，这里是探索过程的记录。

先来说下问题：设置段落的首字母浮动于左侧 这个实例，css的代码是

span

{

float:left;

width:0.7em;

font-size:400%;

font-family:algerian,courier;

line-height:80%;

}

展示效果为：

其他属性的定义对我来说都很容易理解，但定义了width以后，观察到的现象是，首字母T跟段落其他字母的间距改变了，于是就觉得很疑惑，为什么width会是设置 span 元素和其他文本的距离呢？而且，span 是行内元素，且width，height 的定义是无效的。

直到看到这个问答后才明白自己混淆的地方（http://wenwen.sogou.com/z/q729189575.htm ）

span是行内元素没错，不能定义 width 也没错，但这里设置的 width 并不是定义 span 元素与其他文本的间距，而是设置 span 本身的宽度，因为代码中设置了字体尺寸是400%，所以 span 元素也被撑大了，所以设置了 width 表面上观察到的效果是 span 元素和其他文本的间距变大，实际上是 span 元素自己本身的宽度增大了。

同样的，line-height 的效果也并不是设置首字母T与文段其他文本的行间距，而是设置 span 元素本身的行高，和其他文本的行间距对齐只是展示效果恰好而已。