18910140161

img底部留白问题的六大解决方法

顺晟科技

2021-06-16 10:38:55

300

1.将图片设置为块级元素

例如,img { display:block}

2.设置图片的垂直对齐方式

例如,img { vertical-align : top;}(vartical-align的值是可选的,如text-top、bottom、text-bottom等。视情况而定。)

3.将父对象的文本大小设置为0px

例如,如果img的父对象是imgClass,那么只需要给imgClass添加一个属性font-size:0px。但这会使父对象中的文本无法正常显示。即使文本部分被对象包围,设置对象的文本大小仍然可以显示,但CSS验证时会提示文本太小的错误。

4.更改父对象的属性

如果父对象的高度和宽度固定,图片大小取决于父对象,可以设置父对象:overflow:hidden

5.设置图片的浮动属性

例如,img { float:left}

6.取消图片标签与其父对象的最后一个结束标签之间的间距

这是很难实现的,我们经常会添加一些空白缩进,让页面代码层次清晰。

一般来说,如果不需要混图,方法1)比较好,方法2)也不错;如果要图文混排的话,用方法5)会更好,但是要记得清浮。当然,用哪种方法要看具体情况和大家的喜好。

本文转载自中文网站

我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航