三种方式去除img标签图片底部默认空白

一.示例代码

<div class="content" style="background-color:pink;">
        <img src="./imgs/avatar.jpg" style="width: 300px;height: 300px;">
</div>

二.运行结果

三.产生空白的原因

1.图片的display属性默认是inline

2.图片vertical-align属性的默认值是baseline

四.解决方法

方法1：把img变成块级元素

img { display:block; }

方法2：设置img中的vertical-align属性值为middle

img { vertical-align:middle; }

方法3：将img的父元素的行高设置为0（以上代码的父元素为class="content"的div）

.content { line-height:0; }