img 居中_解决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包裹住文本，现象会更明显。

下面我们来解决这个问题

第一种方法：

给div设置和img一样的高度；
缺点：该方法不够灵活，一旦img尺寸改变，我们要重新设置div的高度

第二种方法：

给img设置vertical-align为除baseline以外的值，常用

第三种方法：

给img添加display:block;
这个方法是我们比较常用，但需要注意，img一旦设置为块，text-align:center；就不再生效，图片的水平居中应使用margin:auto;

第四种方法：

给img设置浮动，设置浮动会让img脱离文档流
缺点：父元素高度不会被img自动撑开

第五种方法：

给div设置font-size:0;
缺点：该方法会使div中的文字消失

上述五种方式同学们根据实际情况选择使用即可，最后效果如图所示

文转载自：千锋HTML5学院

原文链接：如何解决img标签下面的小空隙

img 居中_解决img标签下方出现的小空隙相关推荐

python多标签分类_解决多标签分类问题(包括案例研究)
由于某些原因,回归和分类问题总会引起机器学习领域的大部分关注.多标签分类在数据科学中是一个比较令人头疼的问题.在这篇文章中,我将给你一个直观的解释,说明什么是多标签分类,以及如何解决这个问题. 1.多 ...
img标签默认有外边距吗_解决img标签自带外边距问题
三种方法去除img标签自带外边距. #img img{ height: 100px; } #bottom{ width: 100px; height: 100px; background-color: ...
提示缺少unicode打开乱码_解决记事本打开出现乱码的小技巧
很多人都喜欢把一些重要的资料保存在记事本中,但当需要用到时,打开记事本却发现里面的文字全部都变成乱码的了,这令不少朋友烦恼不已.那么,记事本打开出现乱码怎么办呢?今天U大侠小编就和大家说说记事本打开出 ...
h5 iframe嵌套页面_关于解决iframe标签嵌套问题的解决方法
问题描述当我们使用easyui做后台管理系统的时候,会使用tree组件来实现树形菜单,而我们每点击一次相应菜单,会根据是否有url来判断是否是一级菜单,以及是否已经存在 //根据该节点名字判断该节点 ...
css设置按钮竖直方向居中_button内flex垂直居中竟然不居中的解决
问题描述按钮样式为图标+文字,在使用flex布局写垂直居中时,iphone7手机上文字和图标却没有居中,居左显示.代码如下(已精简): {{ confirmButtonText }} ... but ...
关于如何解决img标签中图片超出盒子div范围的讨论
关于如何解决img标签中图片超出盒子div范围的讨论 1.img标签必要属性有两个src,alt <img src="url" alt="text"&g ...
R语言ggpubr包ggsummarystats函数可视化分组条形图(自定义分组颜色、添加抖动数据点jitter、误差条)并在X轴标签下方添加分组对应的统计值（样本数N、中位数、四分位数的间距iqr)
R语言ggpubr包ggsummarystats函数可视化分组条形图(自定义分组颜色.添加抖动数据点jitter.误差条error bar)并在X轴标签下方添加分组对应的统计值(样本数N.中位数med ...
R语言编写自定义函数基于ggsumarystats函数计算每个分组的统计值、自定义可视化分组分面条形图，并在X轴标签下方添加分组对应的统计值（样本数N、中位数median、四分位数的间距iqr）
R语言编写自定义函数基于ggsumarystats函数计算每个分组的统计值.自定义可视化分组分面条形图,并在X轴标签下方添加分组对应的统计值(样本数N.中位数median.四分位数的间距iqr) 目录
R语言编写自定义分组统计函数（customize statistics function）可视化分组箱图并在X轴标签下方添加分组对应的统计值（样本数N、中位数median、四分位数的间距iqr）
R语言编写自定义分组统计函数(customize statistics function)可视化分组箱图并在X轴标签下方添加分组对应的统计值(样本数N.中位数median.四分位数的间距iqr) 目录

img 居中_解决img标签下方出现的小空隙

为什么会出现这种情况呢？

下面我们来解决这个问题

img 居中_解决img标签下方出现的小空隙相关推荐

最新文章

热门文章