缩进文本
text-indent
- 取值:
<length> | <percentage>
- 初始值:0
- 适用于:块级元素
- 百分数:相对于所在块级的宽度
- 计算值:百分数如上;长度值得到绝对长度
- 继承性:是
- 动画性:是
text-indent
属性把元素的第一行文本缩进指定的长度,缩进的长度可以是负值。这个属性通常用于缩进段落的第一行
// 这个规则把段落的第一行缩进3em
p {
text-indent: 3em;
}
text-indent
属性可以用在任何块级元素上,缩进将沿着行内方向展开。text-indent
属性不能用于行内元素或置换元素(如图像)。然而,如果图像在块级元素的第一行里,它将随行中的其他文本一起后移。如果想“缩进”行内元素的首行,可以通过内边距或外边距实现。
text-indent
属性的值可以使负值,这样可以实现一些有趣的效果。最常见的用法是实现悬挂缩进,即首行相比元素的其他内容悬挂在一边。
p { text-indent: -4em }
使用负值时要小心,以防前几个词被浏览器窗口的边缘吃掉。为避免出现这种显示问题,建议加上外边距或内边距:
p { text-indent: -4em; padding-left: 4em; }
text-indent
属性的值可以使用任何长度单位,包括百分数。百分数相对父元素的宽度计算缩进量。也就是说,如果把缩进值设为10%,受其影响的元素的首行缩进的量为父元素宽度的10%。注意,文本缩进只影响元素的第一行,即使有换行也是如此。text-indent
会继承,因此可能会出现预料之外的效果。
文本对齐
text-align
- 取值:start | end | left | right | center | justify | match-parent | start end
- 初始值:在CSS3中是start;在CSS2.1中,由用户代理指定,有可能根据书写方向而定
- 适用于:块级元素
- 计算值:指定的值,match-parent除外
- 继承性:是
- 动画性:否