精通CSS与HTML设计模式 第十一章（分割内容）
一、 分割
leftter-spacing 为字母间添加空格
word-spacing 为单词件添加空格（中文单词不识别，因为中文没有单词的概念）
text-indent 缩进终端块状元素的首行
text-align: justify 实现两端对齐的效果
注：margin-top ,margini-bottom,text-indent,text-align 只适用于块状元素
二、块状化
简而言之，块状化是指将内联元素显示为块状元素，使内联元素也可以使用margin,padding,text-align,width,height,border 等许多块状元素的样式
例：
这是一个显示为块状的内联元素。 它的第一行是缩进的，并且它有抵消的垂直外边距。抵消的垂直外边距。抵消的垂直外边距。抵消的垂直外边距。抵消的垂直外边距。抵消的垂直外边距。抵消的垂直外边距。抵消的垂直外边距。
三、非包裹
wite-space: nowrap的规则阻止文本被包裹，可以将wite-space:nowarp应用到任何你不像被包裹的内联元素
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
四、填充内容
内联元素：padding-left和padding-right填充左右两侧空白，line-height来改变每一行的高度。不可以padding-top和padding-bottom来填充
块状元素：display:block 使用padding-left,padding-right,padding-top,padding-bottom来填充上下左右的空白
五、内联空白
使用一个空的<span></span> 让其margin-left:2em 使其具有一个可控的空白
六、 断行
指的是行与行之间的距离，<br/>将内容移至新的一行，换行后的高度，由行中内容决定，
双重换行 ：<br/><br style="line-height:15px"/> 第一个控制换行，第二换行赋值样式来控制额外的空格数量
断行： 可以插入一个空的<span> 并使其为diplay:block显示为块状元素，通过margin-top:value 来控制换行高度
七、内联水平线
通过border,backgound来设置水平线
注：background-position 控制背景图像从元素的X，Y的起始位置，这样其实可以结合JS让一个图像动起来
