eric书：text属性

文本和字体的区别：简单说，文本时内容，字体用于显示，它是一个改变文本外观的方法。

Indenting Text

text-indent

Values   <length> | <percentage> | inheri

Initial value  0

Applies to   block-level elements

Inherited   yes

Percentages   refer to the width of the containing block

Computed value

    for percentage values, as specified; for length values, the absolute length

In general, you can apply text-indent to any block-level element. You can't apply it to inline elements,

nor can you use it on replaced elements such as images. However, if you have an image within the first line of a block-level element, like a paragraph, it will be shifted over with the rest of the text in the line.（If you want to "indent" the first line of an inline element, you can create the effect with left padding or margin.）

但是，如果在段落的首行有个图形，他将同文本一样向右移动。

text-indent可以为负值，You can also set negative values for text-indent, a technique that leads to a number of interesting effects. The most common use is a "hanging indent," where the first line hangs out to the left of the rest of the element:悬挂缩进。

可能设置为负后开始的字体看不到了，增加

padding-left: 4em;  属性是其可见。

使用百分值，宽度相当于父元素宽度的%值。
如<div width="400px"> <p>     </p> </div>
p{ text-indent:!0%;} 相当于400px*10%=40;
缩进只用于元素的第一行，即使插入了<br/>也是一样。（即在<p>插入<br/>无效果）。

text-indent;最有趣的部分是继承。继承的是计算值，而非声明值。

body{
500px;
}

div {width: 500px; text-indent: 10%;}

p {width: 200px;}


<div>

This first line of the DIV is indented by 50 pixels.

<p>

This paragraph is 200px wide, and the first line of the paragraph 

is indented 50px.  This is because computed values for 'text-indent' 

are inherited, instead of the declared values.

</p>

</div>

<p>内的首先缩进继承了500*10%=50px；