欢迎您来到,码代码-李雷博客        登录  |  注册

使用text-indent做首行缩进时,图片img如何设置成不缩进?

更新:2020-03-12 17:48:23
人气:4803
来源:本站整理
A+

先说下首行缩进,网页中每一个段落都会自动缩进2个汉字的距离。实现这一效果使用的不建议用空格来挤开文字,建议使用: text-indent: 2em;

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

p{
    text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/
}

注:div标签不要忘记起始符。text-indent只对p或div标签有效,对br标签不生效,原因是br标签是换行标签不是分段标签。

但是使用text-indent做首行缩进也有个小问题。会发现段落标签中的img图片也跟着缩进了2em,会对页面的排版造成一定影响。而且即便给 img 设置成了 text-indent: 0; 仍是无法解决此问题。

那么使用text-indent做首行缩进时,图片img如何设置成不缩进呢?
其实使用text-indent时。内部元素遇到float或者display: block后就不继承外部这个缩进的属性了。也就是说,只要给图片加上float或者display: block的 CSS 属性后,图片的缩进会自动失效。

这里为了排版的效果,使用display:block;,避免图片与文字并排。

.content_art img { 
    height: auto !important;
    max-width: 100% !important;
} 
.content_art p img{
    display: block!important;
}


打赏

取消

感谢您的支持,我会继续努力的!

扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

推荐的文章
# 发表我的评论
  /     /  
# 最近评论
暂时还没有评论,要不要说点什么?
  本站PHP博客源代码下载
  本站PHP博客源代码下载
本站使用的PHP博客系统采用PHP和MySql开发,程序开发完全是因为个人爱好,是自己纯手写PHP源代码,未采用任何PHP框架,现已免费开源共享提供给大家下载!
PHP博客下载
  联系博主
QQ:858353007   个人微信号:lileihot123
网站地图
会员服务
关于我们
QQ:858353007
 
广告服务
加我微信
移动端访问
 
 
Copyright © 2014- 2020 www.mdaima.com All Rights Reserved.
李雷博客,专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客!   ICP备案号:京ICP备10202169号