用text-indent标签对文字缩进2个字后，造成图片也缩进的解决方案

段落前面空两个字的距离，不要再使用空格了，而应该使用首行缩进标签代码text-indent。

text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字，css代码如下：

p{
text-indent:2em;
}

但是，这样就导致图片也缩进了，导致图片不能正常居中，特别是在手机端，图片还跑到屏幕外边了。

有不有解决方案呢？

当然有。找了w3c文档，才发现text-indent的属性之一：就是其内部元素遇到float或者display:block后就不继承外部这个缩进的属性了。

所以我们只要给图片元素添加display:block就可以了，css代码如下：

img {
    display:block;
}

加上后，部分解决了这个问题，这个处理方案会让图片居中成为问题。

如果你整站所有的图片都打算居中的话，就可以使用如下代码：

img {
    display:block;
    margin:0 auto;
}

如果你想自己控制图片是否居中的话，就不能用上述办法了，既然图片被缩进2em了，那么再反向缩进2em，那不一样解决了问题。

解决代码如下：

img {
    margin-left:-2em;
}

此时，这个代码就没有任何问题了。

上述2种方法，根据你自己的需求可以任选使用。