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

html-css019

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

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

解决的方法有二。

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

方法二：将img转换为块级，即：

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

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

解决办法：

原因:

如果外层div的父元素padding值为0，那么内层第一个div的margin-top会“转移”给外层div

方法:

1、margin-top:19px改成padding-top:19px

2、父元素加上padding

3、在.jab1之前放一个空的div