哎呀!好久都沒有寫文章了。。。
在 div 內設置一張 img
會發現 img 下方出現一塊間隙
Paste_Image.png
Paste_Image.png
問題描述:
正如你看到的在 div 內設置一張 img
會發現 img 下方出現一塊間隙
原因解析:
因為內聯塊元素默認文字對齊
為 baseline(基線)
解決方案:
1.更改標簽的類型
display: block;
2.設置文字的字號為 0
font-size: 0;
3.設置垂直對齊方式
vertical-align (除了 baseline)
4.將 img 的寬度與高度設置成百分比
width: 100%;
height: 100%;
Paste_Image.png