装订线-具有背景或边框的列的填充和边距

当列（或框或任何布局模块）由于具有自己的背景或边框而形状清晰可见时，对装订线的建议设计准则是什么？

通常，人们会在框的边缘与其文本之间放置一些空间。但是从哪里可以想到这个空间？通过扩大框或缩小文本？

为了说明，这里有一些（但不是全部）选项...

（此外，我可以使用具有任意数量的列和宽度的任何网格-这仅作为示例-每次布局跨越排水沟时都会提出实际问题。）

我已经完成了很多有关基于网格的布局的文章，但是到目前为止，我只看到了一个解决该问题的文章：Khoi Vinh的“ Nudge Your Elements”。

我想念什么？还是根本没有明确的指导方针？

由于基于网格的布局的动机之一是增强全局对齐的意识，因此我想有人可能会认为这一决定取决于需要更多对齐的条件；盒子或里面的东西？

除非我有误读，否则Khoi Vinh在他的文章中主张选项3。

我发现自己在选项3和选项6之间来回切换。使用选项3，该框已对齐，但其文本感觉局促。但是使用选项6时，框和文本都不会对齐（尽管人们可能会说，文本边缘和框边框之间的隐含中间是现在对齐的“东西”）。

超越网络，我对书籍设计和页面构造的教义都没有谈论这个问题。我可以看到佳能适用于绝大多数“清晰背景上的黑色字母”书本印刷，但是第一分钟就为页面布局增加了色彩（或颠倒了黑白方案），这个装订线问题又回来了。

嗯，我想问题是；在我说明的选项之间进行选择是否有任何指导方针？或者我已经超越了设计师的法律，这仅仅是“外观和感觉良好”的问题吗？

每次使用网格时，都必须一致使用它，除非您有一个元素（通常在给定页面上不超过一个）的情况有其合理的理由违反它–使其突出或改变页面的气氛。为了使这项工作必须鲜明，大胆地进行对比。（通过“工作”，我的意思是这看起来好像不是错误。）

严格遵守的网格是和平的。几乎没有任何紧张感；事物出现在眼睛期望的位置，并且读者永远不会感到震惊或感到不适。

在这种情况下，如果您的背景稍微违反了网格（如＃4所示），则看起来像是一个错误。好尴尬 完全没有装订线的情况使包装箱挤满了其他立柱。与设定公开性期望的文本的公开开头相反，这显然是错误的。

0不提供对比度，因此第二列与其余列无差异。在某些情况下，这就是您想要的。

＃5和＃6中的“半檐槽”示例重新定义了檐槽，使其更窄。它们实际上在水平和垂直方向上重新定义了整个网格，因为在这种情况下，装订线最终与行间距完全相同。这本身对文本不利，但可以与文本框一起使用。但是，在＃6中，与顶部和底部相比，文本的两边都有不成比例的空格。这很尴尬，因为没有意义。＃5将是更可取的，因为空白会更均匀地分布。出于相同的原因，＃3优于＃2。

总的来说，我会与Lauren保持一致，并推荐＃3作为您的最佳选择。无论列数如何，这也是最好的一般情况。

有规则。如果您有充分的理由，它们当然可以被破坏，但是您这样做的任何时候都必须是有目的的，大胆的并且明确地“按设计的”。Helvetica Black与佐治亚州的作品因不同而异。Trebuchet与Verdana搭配在一起，使神经gr怒，因为它们之间的差异并不大。一个大的，正方形的，红色的，横跨一列半的盒子可以工作；略带灰色的不会。

我对选项3投赞成票。灰色框的边缘是垂直定义该列的边缘，因此，不会违反这些行（没有原因）。所有三列的装订线都应相同，因此请在灰色框中插入文本。选项2的插图太深了。

这就是我习惯于打印的内容，因此它在网络上也看起来“正确”。

如果这是用于网页设计，那么如果您担心跨浏览器的一致性，强烈建议不要在水平方向上使用任何填充。不同的浏览器对div和padding的处理方式不同，足以使演示文稿中断。

无论采用哪种方式，都只能水平使用边距。它要求添加一两个类以获得所需的确切布局（例如，一组用于div的页边距，另一组用于该段落的页边距），但是从长远来看，它更加可靠。但是，垂直填充通常不是问题。