水平排水沟有专门的术语吗?

平面设计 网站设计 页面布局 术语 空白
2022-01-07 01:32:27

上下文
我的团队正在开发一个响应式网站,我们允许用户配置页面的一些属性,包括网格“单元格”之间的空间。我们就识别“细胞之间的空间”的正确术语进行了对话。显然我们可以使用“margin”之类的东西,但这有点太宽泛了,因为它会包括页面和最外层单元格之间的空间。我们只想识别单元格之间的空间。我们的用户不一定精通技术(意思是 CSS 等),但可能有一些图形设计背景(或至少熟悉常用术语)。

问题
“排水沟”似乎是最正确的术语,但我能找到的“排水沟”的大多数定义都专门指之间的空间。

之间的空间是否有特定的术语或者将它们简单地称为“水平排水沟”是否合适?

示例
这是我要识别的内容的说明。
(图片来自https://www.init.de/en/news/responsive-design

在此处输入图像描述

我当前术语的问题
“水平(/垂直)装订线”在我看来有点令人困惑,因为不清楚装订线是在水平(/垂直)元素之间还是在垂直(/水平)元素。我的团队对哪个定义是准确的存在一些分歧,所以我认为这足以证明这个短语实际上是令人困惑的。

至少就网络而言,“填充”和“边距”不适合我所描述的内容。内边距是指边框和内容之间的空间,而边距是指元素周围的空间。每个边距为 10px 的两个相邻元素之间将有一个 20px 的间距。(是的,我知道 CSS 边距经常崩溃,但并非总是如此。)

我已经看到响应式网格框架中经常使用的术语“gutter”,所以我知道它在 Web 开发中是一个可以接受的术语。我只是想知道“水平排水沟”是否有更合适的术语。

4个回答

在网页设计的范围内,这似乎是 OP 问题的范围,我宁愿使用与网络相关的术语,而不是试图从(迷人的)印刷媒体世界导入排版术语。

我称之为“垂直边距”,就像在 CSS 边距属性中一样。边距是相邻元素的边框之间的间距(与填充相反,填充是元素内部,其边框和其内容之间的间距。)

在此处输入图像描述

用 W3C 的话来说:

边距清除元素周围的区域(边界外)。边距没有背景色,完全透明。 资源

请注意,元素的边框可以是透明的。它不需要可见。

开发人员一定会非常清楚地理解这个术语。而且,在我看来,尽管“margin”不如“gutter”、“aisle”或“slug”那么迷人,但客户肯定会觉得它是一个更友好的术语。

题外话

Cellpaddingand与andcellspacing相似,但过于具体。它们是and标记的有效 html 属性,而不是一般的 CSS 属性。它们不能应用于除那些之外的任何其他标签。如果您只谈论表格(如使用标签制作的构造),那么如果您调用该 area ,您将是正确的如果您谈论的是一般的矩形区域(如由 、 或任何其他标签定义的区域,那么更准确。paddingmargin<table><td><table>cellspacing<div><span><img>margin

作为旁注,请注意cellpadingandcellspacing属性对现代网页设计师和开发人员非常不满,因为这种类型的属性将结构 (HTML) 与样式 (CSS) 混合在一起,导致页面更难维护和/或开发团队。鼓励开发人员不要使用这些属性paddingmargin而是使用 CSS 属性。

同样的事情也适用于使用表格来创建一般布局,就像以前一样。纯粹主义者声称表格应该只用于显示表格数据。<div><span>标签应该用于脚手架。所有这一切都希望有一天我们将拥有语义正确的网页,标签在语义上标记上下文,而不仅仅是后台操纵。

在排版方面,Slug是水平间隙的常用术语。- 段落之后/之前的空间,部分之间或规则之间的水平间隙等。嵌条具有与字体大小相似的指定大小,并将与金属字体内联放置以创建适当的垂直间距。

根据编辑......

Cell padding似乎是最明显的选择。cell spacing

简短的回答

我会使用“行间距”。

长答案

正如 JDB 所提到的,我也更愿意使用与网络相关的术语,而不是尝试从(迷人的)印刷媒体世界导入排版术语。

我会使用术语“列间距”和“行间距”,因为大多数网格布局都使用术语“列”和“网格”。我会避免使用术语“margin”和“padding”以避免与 CSS 关键字发生冲突。

在布局设计中,网格中的那些水平排水沟称为“流线”或“悬挂线”