当前阅读教程:CSS入门到精通 > 文本缩进 text-indent | |||||||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||||||
上一篇: 文本修饰 text-decoration属性 | 下一篇: 文本的大小写 text-transform | ||||||||||||||||
属性定义及使用说明text-indent 属性规定文本块中首行文本的缩进。 注意: 负值是允许的。如果值是负数,将第一行左缩进。
浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。 属性值
示例代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>文本块中首行文本缩进text-indent</title> <!--定义内部样式--> <style> .css01{ text-indent: 100px;/*文本缩进:100px;*/ } .css02{ text-indent: 2em;/*文本缩进:2em(2个字符)*/ } .css03{ text-indent: 50%;/*文本缩进(父宽度的50%)*/ } </style> </head> <body> <!--没有缩进--> <p> 大家好,我是黄菊华老师,主要研究web前端全栈和微信小程序的开发;有微信小程序入门到就业的全套视频;有web全栈入门到就业的全套视频!(没有缩进) </p> <hr>
<p><!--文本缩进:100px--> 大家好,我是黄菊华老师,主要研究web前端全栈和微信小程序的开发;有微信小程序入门到就业的全套视频;有web全栈入门到就业的全套视频!(文本缩进:100px) </p><hr>
<p><!--文本缩进:2em(2个字符)--> 大家好,我是黄菊华老师,主要研究web前端全栈和微信小程序的开发;有微信小程序入门到就业的全套视频;有web全栈入门到就业的全套视频!(文本缩进:2个字符) </p><hr>
<p><!--文本缩进(父宽度的50%)--> 大家好,我是黄菊华老师,主要研究web前端全栈和微信小程序的开发;有微信小程序入门到就业的全套视频;有web全栈入门到就业的全套视频!(文本缩进:父宽度的50%) </p> </body> </html> 效果图 |
|||||||||||||||||
上一篇: 文本修饰 text-decoration属性 | 下一篇: 文本的大小写 text-transform |