在一個div裡面添加了一個img标簽，img大小為80*80px，外邊距為20px。
但是img标簽的位置顯示的卻不正确：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:;padding:;}
.left{
width: px;
margin: px auto;
background-color: #aaa;
}
.left >div{
border: px solid #999;
}
.left >div img{
padding: px;
width: px;
}
.left >div span{
font-size: px;
line-height: px;
vertical-align:top;
}
</style>
</head>
<body>
<div class="left">
<div>
<img src="圖檔/1.png"><span>團隊名稱</span>
</div>
</div>
</body>
</html>
問題原因：
浏覽器對替換元素（行内塊級元素）有一個預設3px或者4px空白，這個空白是造成img标簽高度異常的原因。
這個空白是因為浏覽器會進行文本的基線對齊，即使是不存在文本。
解決方案：
①取消文本的基線對齊：
設定vertical-align屬性值為top
.left >div img{
padding: px;
width: px;
vertical-align:top;//添加該屬性
}
②BFC+float
該方法是應用了BFC特性和float會使元素脫離文檔流的特性：
1. 為img添加
float:left;
屬性
2. 為img的父元素div添加
overflow:hidden;
,使父元素div變成一個BFC
.left >div{
overflow: hidden;//使父元素變成一個BFC
border: px solid #999;
}
.left >div img{
padding: px;
width: px;
float: left;//添加浮動，脫離line box
}
最終效果圖：