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

先说下首行缩进,网页中每一个段落都会自动缩进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;

}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值