星空网 > 软件开发 > 网页设计

img元素底部为何有空白?

img元素底部为何有空白?

原因:

图片文字等inline元素默认是和父级元素的baseline对齐的,即:vertical-align 的默认值是 baseline;而baseline又和父级底边bottom有一定距离;

img出现的空白就是baseline和bottom之间的这段距离;即使只有图片没有文字,只要是 inline 的图片这段空白都会存在。

img 标签 是inline 元素, inline元素默认是baseline对齐的。 当baseline对齐的时候,baseline和bottom之间有段距离,就是出现的空白;

img元素底部为何有空白?

所以直接设置 vertical-align的值都可以避免这种情况出现。

top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0,那么 baseline 与 bottom 之间的距离也变为0,那道空白也就不见了。

如果没有设置 line-height,line-height 的默认值是基于 font-size 的,视渲染引擎有所不同,但一般是乘以一个系数(比如1.2)。因此,在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。当然,这样做的后果就是不能图文混排了。

解决方法:

一:设置vertical-align;

img{	vertical-align : bottom; // top, middle}

只要vertical-align的值是以上三个中任意的一个,就能解决缝隙的问题。

二:定义img的父容器的字体大小为0;

.main{ font-size : 0; }

三:把图片设置为块级元素;

img{	display : block;}

参考::

http://www.xiabingbao.com/css/2015/10/12/css-img-block
https://segmentfault.com/q/1010000000694663
https://www.zhihu.com/question/21558138




原标题:img元素底部为何有空白?

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

跨境供应链物流:https://www.goluckyvip.com/tag/92863.html
跨境物流供应链:https://www.goluckyvip.com/tag/92864.html
跨境电商商务物流:https://www.goluckyvip.com/tag/92865.html
imile跨境物流:https://www.goluckyvip.com/tag/92866.html
跨境物流新加坡:https://www.goluckyvip.com/tag/92867.html
新加坡跨境物流:https://www.goluckyvip.com/tag/92868.html
TikTok 将推出先买后付服务 :https://www.goluckyvip.com/news/188219.html
深圳有没有比较好玩的景点 深圳有没有比较好玩的景点推荐一下:https://www.vstour.cn/a/366175.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流