解决HTML&&CSS浏览器留白现象

html-css019

解决HTML&&CSS浏览器留白现象,第1张

原因:包含图片标签img的div是属于块级元素,而img是属于行内块。故而,浏览器会出现留白的现象。

解决的方法有二。

方法一:给div加一个固定的高,使其与图片的高相等。

方法二:将img转换为块级,即:

这样,就可以解决浏览器留白的问题啦~

图片的display属性默认是inline,而这个属性的vertical-align的默认值是baseline,所以图片底部出现一个留白区域

解决办法: