前端开发中需要注意的图片的间距问题~

最新推荐文章于 2025-08-14 14:41:03 发布
转载 最新推荐文章于 2025-08-14 14:41:03 发布 · 907 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/u/3939041/blog/1925639
文章标签：

#前端 #javascript #ViewUI

本文介绍了三种有效的方法来解决图片显示间距问题：设置图片浮动、转换图片为块级元素及调整父级字体大小至0。这些技巧对于网页设计者尤其有用，可根据不同场景灵活选择应用。

去除图片img自带间距的几种方法：

1、给图片设置浮动

2、让图片变成块级元素

3、给图片的父级设置font-size:0;

用哪种方法都可以，大家可以视情况选择，我平时用第三种比较多。

转载于:https://my.oschina.net/u/3939041/blog/1925639

chengxue9636
关注
前端常规响应式大屏开发流程及注意事项
m0_54850303的博客
12-21 1138
当我们拿到设计图，第一步就需要对设计图的每一个元素在心里有个大致的布局，习惯性是从左到右，从上到下来观察，例如上图，我会先将大屏分为 左、中、右三大块，再将左边这一块分为上中下三个小块，再将左上这一小块继续分为 左中右三个小块，以此类推，逐步细分到最小的元素。很多情况下一套样式已经满足不了多屏幕下的响应式展示，例如下图元素过多，空间过小的情况下，我们只能使用媒体查询，对元素的宽高，边距，字号等等再写一套样式来兼容，这也是响应式兼容最繁杂的一步。，这个插件比较容易二次修改样式，可移植性较强，代码简单易上手，
Shopify 前端开发经验总结（问题及解决）
weixin_54515240的博客
09-02 4828
shopify 前端开发 问题与解决 部分理解（较为初期），样式失效等问题
图片和文字对齐以及图片下间隙/前端四
qq_39112101的博客
03-21 1089
<style> img{ width: 40px; height: 40px; vertical-align: middle;/*调整图片和文字中线对齐*/ } </style> </head> <body> <!--图片对齐和...
界面实例--图片布局在前端
weixin_30333885的博客
01-23 501
　　图片布局在前端很多时候的时候因为图片本身大小长宽比例不同，想要布局得好看，需要注意几点问题，下面写一写怎么布局，主要讲的是<img>元素，需要自己定制形状的可以考虑canvas，前面有讲。 　　先看看<img>默认布局的特点，<img>是行内元素，不设置大小的时候按图片原本大小显示，每个<img>之间有一个字的间隙，会换行。vertical-a...
img图片之间的间距问题
weixin_34055910的博客
12-19 1151
【问题】页面中如果有多张图片，那么图片之间会有一些间距，在某些情况下（如切好的图片再次拼接），在显示上就会出现一些问题。效果如下： 对应代码： 1 <div class="f0"> 2 <img src="images/1.png" > 3 <img src="images/2.png" > 4 <img src=...
前端问题记录篇（四）：解决图片与div容器有间距的问题
安之ccy的博客
04-12 541
div下包裹了一张img，div设置红色边框，没有手动设置padding、margin及其他定位 从图片可以看到，img的下方离红色边框还有一段距离 给图片添加： display: block; 即可去掉底下的间距
图片显示有间隔怎么处理
x1037490413的博客
05-13 453
放多张图片时，图片与图片之间会有间隔 这是因为img是行级块元素，有文本元素的特性，标签中间有间隔，将标签间隔删除，img挨着写就没有间隔了
前端UI测量图片网页长宽工具
03-04
2. 精确测量：工具应能提供像素级别的精度，这对于前端开发中的CSS样式设置至关重要。 3. 多种测量单位：除了像素，工具可能还支持厘米、英寸等传统度量单位，以满足不同需求。 4. 高亮标记：在测量时，工具可能会有...
基于微信小程序的邻家用户端前端开发源码
09-25
微信小程序中的图片资源通常需要经过优化以适应移动端的显示需求，并且要考虑到不同设备的兼容性问题。 此外，样式表（WXSS）和JSON配置文件也是小程序前端开发不可或缺的部分。WXSS类似于网页开发中的CSS，负责小...
前端开发如何优化 SEO：常见问题及解决方案全解析​
最新发布
stbomei的博客
08-14 910
摘要：本文探讨了前端开发对SEO的影响及优化策略。文章指出，前端代码质量直接影响搜索引擎爬虫对网站的抓取和排名，分析了JavaScript动态加载、页面速度、HTML结构、链接适配和移动端体验等五大常见问题，并提出了服务端渲染、资源压缩、语义化标签等具体解决方案。同时强调需关注H标签规范、URL优化、结构化数据等细节，建议开发者建立SEO思维，通过持续优化提升网站在搜索引擎中的可见性和排名。
网页制作中图片上下间为什么会有空隙？解决办法
ao485451041的博客
03-31 712
尽管已经是老掉牙的东西了，而且IMG在html中出现空隙的老式浏览器好多已经一去不复返了，但还是要给大家普及一下原因及原理。 造成图片在IE下与容器下边界有空隙的原因 图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关，不一定是 5px），所以设置 vert...
css 解决多张图片显示时出现的空白间隙问题
DarlingYL的博客
06-20 3676
解决多张图片显示时出现的空白间隙问题
前端只是切图仔？来学学给开发人看的UI设计
m0_67393686的博客
03-02 605
给开发人看的UI设计 ???序言 ?? 一、背景 1. 想做一个好的作品 2. 没有专业UI ??二、功能导向 1. 设计中最重要的事 2. 例子阐述 2. 简约设计 3. 设计简单的、完整的功能 ??三、设计原则 1. 层级 （1）层级是什么 （2）举例阐述 2. 一致性 （1）定义 （2）举例阐述 （3）总结 3. 番外 - 《写给大家看的设计书》 ??四、设计体系 1. 布局 （1）居中放 （2）多列布局 2. 间距 （1）间距的定义 （2）.
html照片与照片之间的间隔,css设置图片之间的间隔的方法
weixin_33502772的博客
06-22 1万+
css设置图片之间的间隔的方法发布时间：2021-01-05 09:32:24来源：亿速云阅读：116作者：小新这篇文章将为大家详细讲解有关css设置图片之间的间隔的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。css设置图片之间的间隔的方法：首先新建一个html文件；然后创建一个div，并在div内使用img标签创建两张图片；最后使用margin属性设置两...
html调整图片之间的距离,html中如何调整图片之间的间距
热门推荐
weixin_34632164的博客
07-02 3万+
html中，可以利用margin-left或margin-right属性来调整图片之间的间距，这两个属性分别可以设置元素的左右外边距，只需要给图片元素img添加“margin-left:值;”或“margin-right:值;”样式即可。本教程操作环境：windows7系统、HTML5版、Dell G3电脑。html中调整图片之间的间距新建一个html文件，命名为test.html；在test.h...
html如何设置图片置顶,css怎么设置图片间距？
weixin_33901614的博客
05-31 9484
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。css可以使用margin属性来设置图片间距：1、css设置图片距离可以用盒子模型的margin属性。操作方法首先用html编辑器新建一个html文件，里面放入几张图片：2、然后在上方的style中设置css的样式，设置img的margi...
前端入门学习之定位知识点详解与图片间隙问题——day06
weixin_44194443的博客
04-01 270
图片间隙问题 产生原因:图片与文字基线对齐 解决方法: img{ display:block;},将图片转成块,改变了图片本身作为内联块的特性: 独占一行; 父元素的text-align对它不再生效,应使用margin:auto; Img{vertical-align:middle/bottom/top}; 默认是baseline(基线对齐),改变图片(内联元素)垂直方向的对齐方式; 不改变图片最为内联块的特性; 设置图片父级标签的 font-size:0;line-height
html中如何让两张图片的间隙消失,css怎样处理图片间隙问题？
weixin_34357833的博客
06-03 5335
css怎样处理图片间隙问题？下面本篇文章给大家介绍一下CSS图片间隙产生的原因及解决方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。图片水平间隙现象：当多张图片横向排列时，会产生一定间距-如下图所示(红色部分为间隙)原因：img元素之间的换行符会被当成空格处理解决方法：1、img元素紧挨着写2、设置父对象的文字大小为0px;(虽能解决问题，但不推荐使用).img_box{fo...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值