导读 实现css文字前留白属性有：1、margin-left属性，可设置文字元素的左外边距，语法“文字元素.....
实现css文字前留白属性有：1、margin-left属性，可以设置文本元素的左外边距，语法文本元素{margin-left: 边距值；padding-left属性，可以设置文本元素的左内边距，语法文本元素{padding-left: 边距值；text-indent属性，可以规定文本块中首行文本的缩进和语法文本元素{text-indent: 缩进值；}。
前端（vue）入门精通课程:入学
本教程的操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
实现css文字前留白属性有三种:
margin-left
padding-left
text-indent
1、margin-left
margin-left文字元素的左外边距可以设置为属性。
| 值 | 描述 |
|---|---|
| length | 定义固定的左外边距。默认值是0。 |
| % | 根据父对象总宽度的百分比定义左外边距。 |
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p{ border: 1px solid red; } p.ex1 { margin-left: 2cm; } </style> </head> <body> <p>一段没有指定外边距的大小。</p> <p class="ex1">左外边2厘米的段落。</p> <p class="ex1">左外边2厘米的段落。</p> <p>一段没有指定外边距的大小。</p> </body> </html>
2、padding-left
padding-left文字元素的左内边距(填充)设置为属性。
| 值 | 描述 |
|---|---|
| length | 规定具体单位计的固定左内边距值，如像素、厘米等。默认值为 0px。 |
| % | 定义基于父元素宽度的百分比左内边距。这个值不会像预期的那样在所有浏览器中工作。 |
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p{ border: 1px solid red; } p.ex1 { padding-left: 2cm; } </style> </head> <body> <p>一段指定内边距大小的段落。</p> <p class="ex1">左内边距2厘米的段落。</p> <p class="ex1">一个左内边距为2厘米的段落。</p> <p>一段指定内边距大小的段落。</p> </body> </html>
3、text-indent
text-indent 属性规定文本块首行文本的缩进。
注意： 负值是允许的。若值为负，则将第一行左缩进。
| 值 | 描述 |
|---|---|
| length | 定义固定缩进。默认值：0。 |
| % | 定义基于父元素宽度的百分比缩进。 |
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p{ border: 1px solid red; } p.ex1 { text-indent:50px; } </style> </head> <body> <p>一段没有指定首行缩进。</p> <p class="ex1">第一行缩进段落50像素。</p> <p class="ex1">第一行缩进段落50像素。</p> <p>一段没有指定首行缩进。</p> </body> </html>
(学习视频分享:css视频教程、web前端）
以上就是实现css文本前留白属性的详细内容是什么？请多注意php中文网其他相关文章！
