按照设计稿写的元素间距不准确？？？

最新推荐文章于 2025-06-10 22:21:26 发布
最新推荐文章于 2025-06-10 22:21:26 发布
阅读量195 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45909266/article/details/113630793
版权

问题的原因其实就是文本的内容没有设置行高
在这里插入图片描述
如上图所示，蓝色被选中部分上下有个细微的距离
只需要设置 line-height;属性即可，属性值为想要的文本高度（只作用于块级元素）
在这里插入图片描述
这个是加了line-height 属性的，可以看出，上下几乎没有距离
这样在设置margin之类的元素之间的距离就不会有误差了

_无妻徒刑
关注
蓝湖怎么切图标注_如何用蓝湖做自动标注 ？
weixin_39706127的博客
12-20 2505
目录：一.下载安装蓝湖插件1.用 Sketch 做的设计图2.用 Photoshop 做的设计图二.一键上传设计图1.用 Sketch 做的设计图2.用 Photoshop 做的设计图三.蓝湖“自动标注”正文：蓝湖【自动标注】让设计师们告别繁琐的【手动标注】，非常地方便且人性化。只需要安装蓝湖 插件，将做好的设计图上传之后，就可以完整而清晰地将设计图中每个元素的尺寸、位置、颜色、间距、字号等样式信...
itext设置字体间距_设计时sketch中字体行高到底该如何设置
weixin_39980596的博客
10-22 673
前言文章中的所有字体规则都是基于750x1334px画布，就是2倍图的前提下进行阐述(设计尺寸1倍和2倍问题一直是一个热点话题，其实各有优势)，我们团队一直都是按照750x1334px的分辨率进行设计，所以按照基于此进行讲解。背景与问题字体是设计中最基本的构成元素之一，在UI设计中亦是如此，用户可以通过设置好的文本信息来理解内容和完成操作，井然有序的字体排版可以提升用户的阅读体验及操作效...
解决页面文字渲染自带间距的问题
catchRun的博客
10-21 498
背景：在工作中经常出现这种情况：按照UI给的设计图和尺寸写出来渲染的页面跟设计图差别很大，尤其是文字的上下间距 原因：页面渲染出来会自带行高 解决办法： 1>单行文字：看字体大小是多大，比如字号是 32px ，那么设置它行高为32px 2>多行文字：将行高设置为 字号 + 行间距，然后写上下边距的时候，设计图上的距离减去行间距的一半...
为什么前端实现的页面跟设计师的设计稿的差别那么大？
weixin_34112208的博客
03-07 1177
设计师 设计师是最贴近产品体验的人，但是术业有专攻，设计师往往更加注重视觉的感受，而容易犯一些美丽的错误： 1、以原生 APP 的体验类比 H5 页面设计 我们都知道，原生 APP 的体验非常流畅，界面也非常华丽，所以设计师也尽量向原生 APP 的体验靠拢。但是理想很丰满，现实很骨感，许多 APP 的体验换到 H5 上实现就惨不忍睹。所以我建议设计师可以多比照其他 H5 网站的表现来进...
为啥UI设计的值放到android studio中显示不准确？
xiyangyang8110的博客
02-08 712
是dp和px存在一个换算的原因 场景：蓝湖上的值直接拿来填到AS中发现不准确 先来个背景：2010苹果公司发布iPhone4(960640 对角线3.5英寸，换算成ppi=330)，推出视网膜屏的概念,就是说眼睛最大能识别的ppi,ppi再高也无效了，因为眼睛识别的极限就是330dp，故称为视网膜屏幕 ppi=dpi=长、宽的平方和开平方/对角线长度（英寸） 再ppi=160时 px=dp px=dp（ppi/160），往往px的大小是dp的两倍多，因为现在手机的ppi都是超过320 重点来了： 我AS
如何把设计稿转换成html,将设计稿转换成WEB页面职业者
weixin_35711852的博客
05-30 1154
将设计稿转换成WEB页面职业者互联网 发布时间：2009-04-02 19:37:09 作者：佚名 我要评论网页制作Webjx文章简介：我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将我们从事的工作简单的说就是“将设计稿转换...
UI设计里，这个不起眼的图标间距竟能改变用户行为？
2401_82943878的博客
06-01 980
你有没有注意过这样一个现象？在一些APP或网页中，按钮之间的距离看起来“刚刚好”，点击起来特别顺手；而有些界面却让人觉得“乱糟糟”的，甚至点错了都不知道自己按了哪个。很多人以为这只是视觉美观的问题，其实不然。一个看似简单的图标间距问题，背后藏着深刻的人机交互原理，甚至能直接影响用户的操作效率、使用体验，乃至最终的转化率和满意度。你知道吗？一个图标太密集的导航栏，会让用户误触率提升30%以上；而适当的留白与间距，能让用户感觉更清晰、更轻松；
前端高度还原设计稿
浮游的博客
06-10 5398
以前前端都是拿到psd设计图，需要自己用ps切图，需要自己在psd上面一个个去量设计的大小和间距，而现在一般都是要求设计师把设计稿直接上传到蓝湖上面，通过蓝湖的标注来写出前端代码。要做到还原设计稿，主要要解决下面这三个问题： 元素大小 元素与元素之间的间距 元素在页面的位置 字体 元素大小 先关注设计图是PC还是移动端，移动端看设计稿是以375px为标准还是以750px宽为标准的设计稿，pc端基本上尺寸1440px，再来说下元素大小的问题，对于图片类的来说我们就要获取图片在蓝湖中的正确大小，这一般来说百
AI时代，UI设计如何与人工智能结合？
2401_82617164的博客
03-27 1589
例如，根据用户在手机端浏览时对重要信息的点击热区数据，AI 能优化布局，将关键元素放置在更容易被用户触及的区域，提升操作便捷性。同时，设计师需要不断学习和掌握新的 AI 技术知识，提升自身的综合素质，以更好地驾驭 AI 工具，创造出既符合技术趋势又富有创意的 UI 设计作品。以往设计师需要手动绘制大量草图，而现在借助人工智能工具，设计师只需输入简单的文字描述，如 “一个社交应用的首页原型，包含头像、动态信息流、导航栏”，相关软件就能基于大量已有的设计案例数据，快速生成初步的原型框架。
设计稿自动标注工具
03-11
"设计稿自动标注工具"正如其名，能够帮助设计师快速地为设计稿添加尺寸、间距、字号等详细信息，自动生成适用于前端开发的代码，使得前端工程师在实现页面时能更准确、更高效地进行工作。 首先，我们来看一下"设计...
产品设计稿UI与WEB前端如何交接(尺寸方面).zip_产品设计稿
01-10
设计师需按照多种屏幕尺寸创建设计稿，并使用像素作为精确的单位。而前端开发者则需要将这些像素尺寸转换成rem等相对单位，以适应不同屏幕和实现响应式设计。双方的紧密协作和明确沟通能确保设计意图得以准确实现，...
MarkMan(mark man) 设计稿标注最新版
09-29
1. **精准标注**：MarkMan支持对设计稿上的元素进行精确的尺寸标注，包括宽度、高度、间距等，可以自定义标注线的颜色和样式，使得设计规格清晰可见。 2. **颜色取样**：能够快速选取设计稿上的颜色代码，支持多种...
Fullstack 面试复习笔记：HTML / CSS 基础梳理
GoldenaArcher的博客
06-07 1040
本来是想把H5C3JS的东西放一起整理的，然后看了下有点长……毕竟主自用，还是先拆开来方便自己复习了。
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | EventKey Codes（键盘码）
最新发布
sunbyte带你学
06-10 783
使用 Vue 3 的 `<script setup>` 语法结合 TailwindCSS 构建一个简单的键盘监听组件，展示用户按下任意键时的 `keyCode`、`key` 和 `code` 信息。
CSS Modules使用
m0_62508027的博客
06-10 186
CSS　Modules使用
vue项目引入tailwindcss
发渐稀的博客
06-06 1107
不同于 Bootstrap 或 Material UI，Tailwind。
Vite-PostCSS
等时钟成长
06-10 682
PostCSS可以说是一个将css解析成AST再重新生成css的工具。PostCSS本身不做具体工作，功能都是由插件完成的。插件分析AST，然后重新生成优化的CSS。[1]
前端开发面试题总结-CSS篇
weixin_60536169的博客
06-05 524
1.为什么谷歌默认可设置最小字体12px，特殊场景需要设置更小字体2.方式一CSS3的缩放p {注意：行内元素没有效果3.方式二zoom属性p {zoom:0.5;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值