图片下间隙问题
一、問題：一個盒子里包含一張圖片，盒子不設大小，圖片出現(xiàn)下間隙
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>圖片下間隙問題</title><style>*{margin: 0;padding: 0;}.box{border: 1px solid #000;}</style> </head> <body><div class="box"><img src="1.png" alt=""></div> </body> </html>二、解決辦法
①設置父對象的文字大小為0px
.box{border: 1px solid #000;font-size: 0;}②將圖片轉換為塊級對像
.box img{display: block;}③設置圖片的垂直對齊方式（任選一種）
.box img{/* display: block; */vertical-align: top;vertical-align: middle;vertical-align: baseline;vertical-align: text-bottom;vertical-align: text-top;}④改變父對象的屬性
.box{border: 1px solid #000;/* width: 500px; */height: 375px;overflow: hidden;}⑤設置圖片的浮動屬性
.box img{float: left;}轉載于:https://www.cnblogs.com/EricZLin/p/9335058.html
總結
- 上一篇： Python入门学习笔记08（rando
- 下一篇： plsql developer导入导出序