一.示例代码
<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; }