怎么用css实现首行缩进功能(css,开发技术)

很多小伙伴在使用html做段落编写的时候，总是会觉得在阅读上有些不适。因为我们的书写习惯里面有一条是这样的：段落开头空两格。但是html代码默认是没有这样的规则的。这时候有些小伙伴可能会机智的用空格来实现这样的效果，但实际上css中提供了html首行缩进属性。

html空格怎么打?一文中有详细介绍了HTML空格的使用。我们可以使用四个空格来达到首行缩进的效果。

使用这种方法有两点问题：第一，换行符不好打不好记；第二，换行的空格不好控制（一个中文字符在不同字体大小的情况下对应的空格数是不同的，上述代码使用了四个空格，只空了一个字符的位置（大约，并不准确））。

html是可以直接使用空格来进行空格效果的实现的，只不过多个空格会被合并成一个空格，使用white-space: pre;可以让空格不进行合并。

使用这种方法解决了上一种方法的不好记的问题，但空格长度的问题还是没有解决。

不管是第一种方法还是第二种方法，都有一个问题：空格在html代码内，有时候会出现多了或者少了空格的情况，会让页面不美观，这时候可以在方法二的基础上进行拓展，使用 :before伪元素在每个p元素前（小编这里使用class选择器进行选择，不然全部p元素都会出现这种效果而失去对照）插入空格以实现段落前缩进的效果。

这种方法已经解决了大部分的问题，但最后还是留下了宽度的问题。

其实，css中提供了首行缩进的属性，只要将text-indent设置一个值，就能实现首行缩进的效果。最常用的值是以em为单位的值，2em表示二倍当前字体大小，以16px为例，2em就是32px，也就是两个字符的距离。

使用这种方法能完美解决缩进问题，是缩进方案的最优解（不过一般将这种属性写在单独的css内以方便作为特殊样式调用而不是行间样式，小编这里是为了便展示）。