Css 解决 image 标签间距问题

Dear 丶 2022-11-19 07:54 274阅读 0赞

开发 uni-app 时发现，同一父级元素下的多的image标签在Chrome浏览器有上下间距

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center]  
上图代码

<view class="my-group-page-card-img">
    	<image class="portrait-img" src="@/static/img/head portrait.jpg"></image>
    	<image class="portrait-img" src="@/static/img/head portrait2.jpg"></image>
    	<image class="portrait-img" src="@/static/img/head portrait3.jpg"></image>
    	<image class="portrait-img" src="@/static/img/head portrait4.jpg"></image>
    </view>

可以通过给父级元素 `my-group-page-card-img` 加 `font-size: 0;` 属性来解决。

[Css 如何快速让 button 按钮标签水平居中][Css _ button]  
[css 让img图片在div标签垂直居中][css _img_div]  
[css 解决 vertical-align: middle 失效问题][css _ vertical-align_ middle]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/6eadcdca3de24154ac1a5235bf3401e0.png
[Css _ button]: https://blog.csdn.net/weixin_43900414/article/details/115355722?spm=1001.2014.3001.5501
[css _img_div]: https://blog.csdn.net/weixin_43900414/article/details/116593895?spm=1001.2014.3001.5501
[css _ vertical-align_ middle]: https://blog.csdn.net/weixin_43900414/article/details/109528138

发表评论取消回复

表情：

评论列表（有 0 条评论，274人围观）

还没有评论，来说两句吧...

相关阅读

相关 image标签部分图片不显示问题

image标中图片不显示问题最近项目中遇到的一个问题,后台上传的图片在前台展示时,部分图片不显示,因为图片是通过循环出来的,所以经过排查,觉得问题应该出在图片路径上面,

- 日理万妓/ 2023年06月20日 03:57/ 0 赞/ 159 阅读

相关 span标签间距（实用）

原文出处：[https://www.cnblogs.com/chargeworld/p/10270515.html][https_www.cnblogs.com_chargew

逃离我推掉我的手/ 2023年06月17日 09:56/ 0 赞/ 3 阅读

相关 Css 解决 image 标签间距问题

开发 uni-app 时发现，同一父级元素下的多的image标签在Chrome浏览器有上下间距 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

Dear 丶/ 2022年11月19日 07:54/ 0 赞/ 275 阅读

相关 18-CSS问题-让多个div横排显示并设置间距解决方案

18-CSS问题-让多个div横排显示并设置间距解决方案参考文章： [（1）18-CSS问题-让多个div横排显示并设置间距解决方案][1_18-CSS_-_div]

野性酷女/ 2022年09月10日 02:16/ 0 赞/ 203 阅读

相关 CSS：如何清除a标签之间的默认留白间距

即使我们使用了类似 \\{margin: 0;padding: 0;\} 这样的代码重置了浏览器默认样式,也会发现类似<a>标签这种inline-block元素，它们之间也还存

深藏阁楼爱情的钟/ 2022年06月12日 11:10/ 0 赞/ 233 阅读

相关关于img标签间距问题

[http://www.cnblogs.com/lovelyun/p/4846222.html][http_www.cnblogs.com_lovelyun_p_484622

青旅半醒/ 2022年06月09日 14:29/ 0 赞/ 211 阅读

相关 css-（border-image）

> 用图片做边框效果 border-image-source:url(); border-image-slice:数字；还有个fill属性用来填充 bor

叁歲伎倆/ 2022年06月02日 08:27/ 0 赞/ 167 阅读

相关 CSS中文字间距和行间距

文字间距 1，text-align设置文字布局即text-align：center文字就会在div中居中停放 2，font-size设置文字的大小即font-siz

Love The Way You Lie/ 2022年05月10日 03:28/ 0 赞/ 268 阅读

相关 CSS设置文本——行间距

<1>.用比例设置行间距 1 <html> 2 <head> 3 <style type="text/css"> 4

柔光的暖阳◎/ 2021年11月11日 11:52/ 0 赞/ 430 阅读

相关 CSS设置行间距和字间距

CSS设置行间距在`CSS`中通过`line-height`属性来实现行间距的设置，`line-height`的值表示的是两行文字之间基线的距离。文字的基线，指...

短命女/ 2021年06月30日 08:23/ 0 赞/ 615 阅读