CSS - 去除圖片img底側空白縫隙
阿新 • • 發佈：2018-05-12
pla 塊元素 一個 默認 har 就是 set red ali
1. 圖片底部有空隙
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> img { /* vertical-align: middle;*/ /* display: block;*/ } div { border: 2px solid red; } </style> </head> <body> <div> <img src="images/3.jpg" height="252" width="448" > my name is allin </div> </body> </html>
2. 原理
圖片或者表單等行內塊元素，他的底線會和父級盒子的基線對齊(即默認vertical-align: baseline)。這樣會造成一個問題，就是圖片底側會有一個空白縫隙。
3. 解決方法
3.1 方法一：vertical-align:top | bottom | middle
3.2 方法二： 將行內元素或行內塊元素轉換為塊級元素
4. PS: vertical-align
vertical-align不影響塊級元素中的內容對齊，它只針對於行內元素或者行內塊元素，特別是行內塊元素， 通常用來控制圖片/表單與文字的對齊。
CSS - 去除圖片img底側空白縫隙