img图片下方出现空隙的原因及解决办法

约 428 字     3629 次已读     CSS

div里面放一个img之后,下面的布局就会跟img之间有个空隙,刚开始以为是回车造成的,可是去掉之后也不起作用

原因

img属于inline-block也就是行级块元素,凡是带有inline属性都具有文字类特性,为了正确显示带有尾巴(比如j、q、y等)英文字母,就在下方留了一些空白的地方

解决办法

通过修改img自身属性

1.将img变为块级元素

img {
  display: block;
}

2.设置img的vertical-align为除baseline以外的值

3.将img的高度设置成跟父级div一样的高度;

缺点:该方法不够灵活,一旦img尺寸改变,我们要重新设置div的高度

通过修改父级元素属性

1.将父级元素的font-size设置为0

div {
  font-size: 0;
}

2.将父级元素的line-height设置为0

div {
  line-height: 0;
}

上述方法就可以完美解决img图片下方出现的空隙