cssimg适配尺⼨_如何解决img标签下⾯的⼩空隙（详细教
程）
很多初学⼩伙伴在写页⾯的时候碰到过这样的问题，当我们⽤⼀个div直接包裹img，img的下⽅会出现3px间距，如图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.box {
border: 2px solid red;
}
</style>
</head>
<body>
<div class="box">
<img src="img/4.png">
</div>
</body>
</html>
那原因是什么呢？
img是⼀种类似text的标签元素，在结束的时候，会在末尾加上⼀个空⽩符（匿名⽂本），导致下⽅会多出来 3px 间距，其实我们在img右侧添加⼀个span包裹住⽂本，现象会更明显
有五个办法可以解决以上问题：
text align center第⼀种⽅法：
给div设置和img⼀样的⾼度； 缺点：
缺点：该⽅法不够灵活，⼀旦img尺⼨改变，我们要重新设置div的⾼度
第⼆种⽅法：
给img设置vertical-align为除baseline以外的值，常⽤
第三种⽅法：
给img添加display:block;
这个⽅法是我们⽐较常⽤，但需要注意，img⼀旦设置为块，text-align:center；就不再⽣效，图⽚的⽔平居中应使⽤margin:auto；第四种⽅法：
给img设置浮动
设置浮动会让img脱离⽂档流 缺点：
缺点：⽗元素⾼度不会被img⾃动撑开
第五种⽅法：
缺点：该⽅法会使div中的⽂字消失
给div设置font-size:0; 缺点：
根据实际情况选择合适的⽅法；让我的⼥神更完美！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。