对于 WordPress 的正文内容和摘要，有时候我们喜欢给他按照 word 中文阅读习惯那样来个段落首行缩进，这是从小学开始写作文，语文老师就要求的格式了。

wordpress 博客内容的首行缩进代码

Wordpress 博客发布内容时不是按中文阅读习惯排版的方式，每段的首行都是顶格不能自动空两个字，如果你想每段首行空两格，则可以通过写文章时在可视化模式下敲几下空格键。这样手动做虽然收放自如，但也比较麻烦，要是哪一...

LMS

2009-03-15 4.6K+ 12

所以，对于从小养成的习惯，有的时候很难放弃。要实现也很简单，给主题正文或者摘要区域的文字内容 P 标签加一个 CSS text-indent 就搞定了，比如：

.entry p{text-indent: 2em;}

可加了这个缩进后当遇到正文内容中有独立段落的图片时，图片也会被缩进，这样会很影响排版。而且对于缩进后的图片大小也不好把握，对于自适应主题尤其如此。所以很多人因为搞不定图片这个问题最后放弃了使用段落首行缩进。

其实 text-indent 有个很奇怪的属性，就是其内部元素遇到 float 或者 display: block 后就不继承外部这个缩进的属性了，也就是说，只要给图片加上 float 或者 display: block 的 CSS 属性后，图片的缩进会自动失效。

WordPress 默认上传图片、插入图片后会带上 aligncenter、alignleft、alignright 和 alignnone 的 class，如果你对 aligncenter、alignleft、alignright 做了对应的 CSS 定义后，图片就不会受到外部 P 标签属性 text-indent 的影响，这 3 个 class 属性在默认主题里的 CSS 定义如下：

.alignleft {
        float: left;
}

.alignright {
        float: right;
}

.aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
}

对于外链的图片，只要给他加上对应的 class 就可以了，比如：

class="aligncenter" 
class="alignright" 
class="alignleft" 
style="display: block"

看看例子：

1、只是 alignnone，也就是不浮动也不居中，图片就跟着缩进了。

2、只是 display: block，不浮动也不居中，只是定义了 css，图片不缩进了。

3、aligncenter，也就是居中，相当于给加了 display: block 所以图片不缩进。

4、左右浮动：alignleft 和 alignright，也就是 float:left 或 float:right，图片不缩进，不过效果也只有 float:left 下看的出来，float:right 后图片就无所谓缩进了。

当然，其实还有一种方法，假如你文章内容中的图片都是独立成段，且图片宽度大到足够右边对齐，并居中显示，那么，只要让你的图片 padding-right 或 margin-right 值设置成你缩进对应的值 2em，这样看起来，图片左右都空出了 2em 的值，图片的缩进虽然不能消除，但视觉上就显示成居中了，感觉就会好一些。