在HTML电子邮件的群发中，需要按照中文排版风格自动缩进两字符，很自然就想到了利用空格与CSS伪类的content属性，如下：

p:before {
    content : "\20\20";
}
/*第一个段落不缩进*/
p:first-child:before {
    content : "";
}

但很遗憾，经过测试发现，竟然一个空格都没有，在其他同学的提示下，使用”\A0”进行代替。经过测试，空格总算出现了，但是总是很难对齐，大概需要6个空格才能勉强与两个汉字相等。

在资料的翻阅中，竟然发现空格竟然有6种形式，请参见参考参考文献中的 《HTML中6种空白空格的区别》。

很显然，在中文模式下，我们应该采用2个全角空格（HTML转义格式为& emsp;）或者4个半角空格（HTML转义格式为& ensp;）,于是现在的CSS样式为：

p:before {
    content : "  ";
}

但是输出的不是空格，而是转义字符代表的字符，突然想到HTML、CSS、Javascript对Unicode字符都有自己的一套编码，详见《HTML、CSS、JS Unicode字符互转》，于是翻阅《UTF-8编码规范》，得到相应的Unicode编码2013，最后得到的样式如下：

p:before {
    content : "\2003\2003";
}

最后效果非常完美，如下图所示。

textarea在ios上首行自动缩进了 文字首行缩进代码_首行缩进

1. 为什么不采用inline-block与width

大部分的人想到的办法就是组合使用inline-block与width，如下：

p:before {
    display : inline-block;
    width : 30px;
    /*内容不可省略，否则撑不开*/
    content : "";
}
p:first-child:before {
    content : "";
    display : inline;
}

基本也能实现缩进的效果，但是2个字宽度难以计算准确，并且在字体大小发生变更时，又得重新设置缩进宽度，一句话，准确性与适应性都比较差。

2. 为什么不使用padding

这是对BOX模型理解不深刻的表现，使用padding，整个P元素都会缩进，而不是首行字符缩进。

3. 字符隐藏方案

添加2个字符的SPAN元素，并将可见性设置为“hidden”，CSS样式如下：

.p-help {
    visibility : hidden;
}

HTML内容如下：

<p>
    <span class="p-help">空白</span>
    你好！当你看到这封信时，……。
</p>

效果与准确性都不打折，但HTML的侵入性太严重了，所以也只能作为备选方案。