p text-indent img|段落增加首行缩进后图片不继承缩进的方法

发布时间:
2020-02-26 11:27:29

在做这个wordpress模板的时候有遇到一个问题:因为wordpress默认在写文章时Enter键是P标记换行,在前端文章界面有增加了段落的首行缩进功能(text-indent:2em)。但是这样会导致一个问题,如果段落中有图片,那么图片也会继承p段落的首行缩进问题,这就会导致图片可能位移至article-content以外的区域。先来看一下调整前后的对比:

在网络上找了一下办法,发现text-indent在其内部元素遇到float或者display: block后就不继承外部的首行缩进的属性。这样的话,给图片加上float或者display: block的 CSS 属性,图片的缩进会自动失效。但是为了排版的效果,一般都使用display:block;即可,这样图片就不会与文字并排,图片单独占一行。

共有 1 条评论

  1. 违章代办

    还是这样好看

You must be logged in to post a comment.