html里面首行缩进,网页中每一个段落都会自动缩进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 属性后,图片的缩进会自动失效。
如在给content加了text-indent,实现图片不缩进,如在给图片加个标签即可
content p img {
display: block!important;
}
PC模板网声明:
☉vip会员全站90%资源均可以免费下载,有问题可以加入技术QQ群一起交流学习。
☉本站提供的网站源码,都是做好测试好发布的,均可放心使用。
☉如有其他问题,请加网站客服QQ(906875572)进行交流,QQ交流群(877945832)。
☉资源与文章搜集于网络整理,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理906875572@qq.com。
☉vip会员全站90%资源均可以免费下载,有问题可以加入技术QQ群一起交流学习。
☉本站提供的网站源码,都是做好测试好发布的,均可放心使用。
☉如有其他问题,请加网站客服QQ(906875572)进行交流,QQ交流群(877945832)。
☉资源与文章搜集于网络整理,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理906875572@qq.com。