先说下首行缩进网页中每一个段落都会自动缩进2个汉字的距离。实现这一效果使用的不建议用空格来挤开文字建议使用: text-indent: 2em;
text-indent可以使得容器内首行缩进一定单位。比如中攵段落一般每段前空两个汉字
注: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;避免图片与文字并排。
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。