网页设计字段间距一样 第1篇
首先说一下UI设计中，间距设定的一个理念，间距设定一般要设定一个最小栅格基数，如4、5、6、8为间距设定的起始数值。
然后页面中，接下来所有的间距设定，都得是这个数值的倍数。（这点后面会详细讲解）
在一个带有文字的设计组件中，若设计思路上要呈现视觉统一的间距，那可以算出字号与行高的间隙，然后减去相对应的栅格数值，使其视觉上接近统一的间距。
下图所示，设计思路上想呈现一个30px的统一间距，那就可以减去一个最小栅格数值。
若最小栅格数值是6px，最终给出的间距就是24px，视觉距离呈现的就是接近30px的距离。
这种方式也是我一直以来用的方法，好处就是没有打破间距设定的原则。
设计的间距与开发看到的间距，都是有规律的栅格系统间距。
唯一有点不完美的地方就是，实际距离有时还会有一点小误差，但其实在视觉上也完全可以忽略掉了。
网页设计字段间距一样 第2篇
不同字号间距设定有一个原则，当字号越大时，字与其他元素间距也就需要相对越大。
字号越大说明级别越高，级别越高从信息层级上来讲，就需要较大的间距来呈现。
这是客观上的一个原则，文字越大，就需要更多的留白去承托，就像文字的行高，字号越大文字的行高增加的倍数也就越大。
网页设计字段间距一样 第3篇
字体设计师，为了能满足文字行间距的合理展示，通常会给字体设定一定的行高。
行高就是在设计软件中选中文字后，上下外边框高度，字体的行高没有标准，不同的字体一般默认行高也不一样。
也就是因为字体的行高，让UI设计师对文字与其他元素的间距设定，有不同的见解。
上图都是30px的间距，但因为字体行高不同，A、B两个方案的实际视觉间距不同。
认同A方案合理的设计师，理由是文字最好设置一定的行高，不然折行时视觉上没有行间距，很拥挤，不得不再设置行高，最终30px的间距还是有间隙。
认同B方案的设计师，理由是UI设计本身对几个像素的差距就很敏感，视觉上做不到统一，就是不合理。
两者的表述都对，但也确实都有一定的弊端，下面给大家介绍两个解决方案。
可以确定的是，为了满足文字折行后的阅读性体验，最好带有一定的行高，这样也会利于与开发对接。
网页设计字段间距一样 第4篇
在有段落的文案中，很多设计师为了方便，直接给一个回车键的段落间距，这样是万万不可取的。
一个回车键的间距，就是一行字的行高，通常这个间距都比较大，就算设计风格需要这么大的间距，那一定也要手动去设置段落。
段落数值的设定，一般情况要大于文字行高的一半，比如文字行高为42，那段落最好大于21，这样段落间距加上文字行高，整体就是≥倍。
为什么是≥倍？原因是文字的行间距，一般大于倍视觉上是比较舒适，例如字号是30，那行高设置为45，形成倍的间距。
网页设计字段间距一样 第5篇
接下来，根据最小栅格基数为6的设计规范，通过一个商品卡片案例，分析一下间距设定的几个原则。
上图中，首先要给各个元素分类，比如主标题和副标题是一类内容；标签是一类内容；价格是一类内容；“找相似”按钮又是一类内容。
根据亲密关系原则，同类内容的间距应该更近，这样有利于建立信息层级关系，提升用户的可读性。
具体多近呢？可以根据商品卡片在页面中的外边距，来进行分析定义。
看一个产品的外边距基本能判断，是宽松型排版，还是紧凑型排版。
产品的外边距是根据设计语言，产品定位，产品内容多少等来定义，常见的边距有20、24、30、36、48、60等。（大概就是这个范围内）
使用较大外边距，内容区域的间距要小于外边距，小到可以直观分辨即可，这样可以体现出页面中，内容的亲密关系。
使用常规外边距，比如我们的案例中，使用30px就是常规外边距，内容区域要适当小于或等于外边距，这样视觉上体现的是统一性。
主标题与副标题属于同类项，它们之间的间距一定要小于，卡片的内边距，这样整体看上去才能体现信息层级。
间距小到多少，还是那个理念，可以直观感受到比内边距小即可为止，不能过小。
一般来说，视觉上的间距大概是内边距（同模块中的大间距）的一半，就会表现的不错。
案例中设置的是一个栅格单位6px，再加上文字的行间隙，视觉上大概就是15px的间距，就是内边距的一半。
接下来，给案例加标签，标签与文字不是同类信息，所以要适当与主副标题拉开间距。
通常第一选择就是，视觉距离与内边距30px，保证统一。
案例中设置的是24px，再加上文字的行间距，就非常接近30px。
接下来是价格，对于一个商品卡片设计，价格是需要着重突出体现的。
一般设计上要突出一个元素，大概3种方式：一是改变颜色；二是放大；三是加大留白；也就是加大间距。
案例的商品卡片，设计风格价格颜色规范是黑色，所以颜色不能改变。
只能放大或加大留白，放大和留白得在合理的范围内，不然就会破坏卡片的整体结构性。
间距上与标签设置30px的间距，加上文字的行高，视觉上的间距，会成为卡片中最大的间距留白，从而起到突出的作用。
这种设计方法，在一个设计组件中，最好只出现一个，不然整体结构就会有一定程度上的破坏。
另外强调一下，统一性固然重要，但设计的核心是为需求目标服务，所以，这时候统一性的优先级是次于需求目标的。
就像淘宝首页的瓷片区，间距非常紧凑，失去了一定的美感，但这样做确实展示了更多的内容，满足了需求目标。