什么是垂直和水平填充/边距？

Posted 2023-03-17

【中文标题】什么是垂直和水平填充/边距？

【英文标题】：What are vertical and horizontal padding/margin?

【发布时间】：2017-03-10 19:09:02

【问题描述】：

有很多讨论提到垂直和水平边距和填充。我了解外部边距和内部填充之间的区别，但垂直和水平并不像看起来那么明显。

假设有人在讨论垂直填充。左右填充位于视图的垂直边缘，因此可以将其视为垂直填充。但是顶部和底部填充限制（填充）视图垂直，因此也可以将其视为垂直填充。一旦你可以从两个方面看到它，区别就不那么明显了。如果没有其他上下文，很难知道指的是哪个。

对于哪些边缘被认为是“垂直填充/边距”以及哪些是“水平填充/边距”，是否有一个公认的标准？这个标准的起源是什么（CSS、html、android/ios 布局、inDesign 等）？

谢谢

【问题讨论】：

是padding的方向——垂直padding就是垂直方向的padding，所以top/bottom。水平填充是水平方向的填充，所以左/右

谢谢。请不要对这个问题投反对票。如果没有明确的解释（我从未见过），它很容易混淆。让这个问题站出来帮助那些可能有同样问题但不敢问的人。

我没有投反对票，但老实说，我从未发现这个概念特别令人困惑。

我实际上认为情况正好相反，直到有人说他们相信它就像你说的那样。一旦我解释了如何以任何一种方式看到它，就连他也变得不确定了。为了清楚起见，我通常将其定义为 heightMargin 和 widthMargin。

【参考方案1】：

我不相信 CSS 规范规范地规定了这一点。但它确实在section 8.4 Padding properties 中提供了一个示例。它说：

h1     
    background: white;    
    padding: 1em 2em;

上面的例子指定了一个 '1em' 垂直填充（'padding-top' 和'padding-bottom'）和'2em'水平填充（'padding-right' 和'padding-left'）。 'em' 单位是相对于元素的字体 size: '1em' 等于所用字体的大小。

明确“竖”指上下，“横”指左右。

【讨论】：

太棒了！这是我看到的关于此事的唯一官方澄清。谢谢！

【参考方案2】：

填充和边距之间有明显的区别。有一个很好的例子可以在 Stack Exchange 上找到 here。一旦了解了区别，就可以查看每个元素支持的属性；特别是顶部、底部、右侧和左侧。

CSS 作为一种语言被设计为独立于平台的，与 iOS、Android 等的起源无关。如果您对 history of CSS 感兴趣，可以查看***

【讨论】：

这如何解决这个问题？

因为他的问题是多部分的，而且也充满了不正确的假设。我想只对问题投反对票会更简单，因为他喜欢的答案基本上是“垂直=上/下和水平=右/左”。这根本不等同于任何教育。

这个问题不是多部分的。我想你只是误解了它。问题清楚地表明我理解边距和填充之间的区别。那不是问题。问题是垂直边距是指视图垂直边缘的边距还是视图的垂直约束。