图片下间隙问题
Posted ericzlin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片下间隙问题相关的知识，希望对你有一定的参考价值。
一、问题：一个盒子里包含一张图片，盒子不设大小，图片出现下间隙
<!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; }
以上是关于图片下间隙问题的主要内容，如果未能解决你的问题，请参考以下文章