解决图片底部有空白间隙的问题

问题描述

right-top未设置高度时，插入高为100px的图片，right-top却被撑到了104px。

原因

这是因为形如图片的行内块元素的默认垂直对齐方式是基线对齐（baseline）,给文字预留了部分显示空间（即被文字占用）。

垂直对齐方式有四种不一样的准线进行描述。
以下图所示，基线和底线之间还留有部分距离。

因为默认的对齐状况是按照英文的基线对齐，在不对垂直对齐方式进行调整的状况下，因为是基线对齐，图片的下面就会产生空白缝隙的状况。

解决方案

方案一将图片的垂直对齐方式修改为非基线对齐，将vertical-align其改成非baseline (bottom、middle、top)便可。

img {vertical-align: middle;
}

方案二把图片转换为块级元素display: block

因为这个空隙是因为行内块引发的，所以咱们也能够采用将图片的显示效果改成block

img {display: block;
}

解决图片底部有空白间隙的问题相关推荐

解决图片底部默认空白缝隙问题
图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐. 主要解决方法有两种: 1. 给图片添加 vertical-align:middle | top| bottom 等.(提倡使用) 2. ...
解决图片底部的空白缝隙
1.原因:图片(行内块元素)和文字默认基线对齐,所以生出了缝隙. 2.解决方法方法一:给图片添加vertical-align属性(⭐推荐使用) img{/* top | middle | botto ...
相邻图片之间有空白间隙的问题解决
相邻图片之间有空白间隙当在网页中两张相邻的图片渲染时,会有一定的空白间隙距离存在.. 原因:这是因为< img>图片为 inline-block 行内块元素,这是 inline-bloc ...
【必看】HTML+CSS去掉img图片底部的空白的3种通用方法
去掉img图片底部的空白的3种通用方法效果如图: 图片下方有莫名的空白,总是去不掉! 空白产生的原因:图片是内联元素,默认带有一定的间距,间距与文字字体有一定的关系. 因此,基于此原因有一下解决方法 ...
css解决图片底部留白问题
css解决图片底部留白问题参考文章: (1)css解决图片底部留白问题 (2)https://www.cnblogs.com/yuzihong/p/10683181.html 备忘一下.
iOS解决UITableView头部和底部出现空白间隙的折腾
在写App时,使用了一个第三方库TreeTableView,很简洁很棒!不过美中不足的是其显示的内容头部和底部都有一截空白. 就不上图了,大家都能够领会 ;) 对于UITableView头部和底部出现 ...
CSS | 解决html中img标签图片底部存在空白缝隙的问题
目录问题描述原因分析解决方案写在最后问题描述在学习CSS的过程中,我们经常会遇到图片底侧存在空白缝隙的问题. 代码示例: <!DOCTYPE html> <html la ...
uniapp解决图片底部留白
使用u-image 组件图片底部会有大概10px的留白在这里插入图片描述我写的是宽度撑满,高度自适应,就出现了上面情况解决方法意思大概就是,垂直底部对齐,想要了解vertical-align的 ...
解决图片底部间隙对齐问题就用vertical-align
项目中vertical-aligin可以帮你解决的问题文本框和表单按钮无法对齐问题 input和图片无法对齐问题 div中的文本框,不能贴顶问题 div不设置高度由img撑开然后img底部有间隙问题 ...

解决图片底部有空白间隙的问题

问题描述

原因

解决方案

解决图片底部有空白间隙的问题相关推荐

最新文章

热门文章