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