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

There is a lot of discussion that mentions both vertical and horizontal margin and padding. I understand the difference between external margin and internal padding but vertical and horizontal are not as obvious as it seems.

有很多讨论都提到了垂直和水平边距和边距。我理解外部边界和内部填充之间的区别，但是垂直和横向并不像看上去那样明显。

Lets say that someone is discussing vertical padding. Left and right padding lie along the vertical edges of the view, so that could be thought of as vertical padding. But top and bottom padding constrains (pads) the view vertically, so that could also be thought of as vertical padding. Once you can see it both ways the distinction is not so obvious. Its hard to know which is being referred to without some other context.

假设有人正在讨论垂直填充。左侧和右侧填充位于视图的垂直边缘，因此可以将其视为垂直填充。但顶部和底部的填充物约束(pad)垂直的视图，因此也可以被认为是垂直填充。一旦你能看到两者的区别，区别就不那么明显了。它很难知道在没有其他上下文的情况下被引用。

Is there an accepted standard for which edges are considered "vertical padding/margin" and which are "horizontal padding/margin"? What is the origin of this standard (CSS, HTML, android/ios layout, inDesign, etc)?

是否有一个公认的标准，哪些边被认为是“垂直边距/边距”，哪些是“水平边距/边距”?这个标准(CSS、HTML、android/ios布局、inDesign等)的来源是什么?

Thanks

谢谢

2 个解决方案

#1

I don't believe the CSS spec normatively specifies this. But it does provide an example in section 8.4 Padding properties. It says:

我不认为CSS规范规定了这一点。但它确实提供了第8.4节填充属性的一个例子。它说:

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

The example above specifies a '1em' vertical padding ('padding-top' and 'padding-bottom') and a '2em' horizontal padding ('padding-right' and 'padding-left'). The 'em' unit is relative to the element's font size: '1em' is equal to the size of the font in use.

上面的示例指定了一个“1em”垂直填充(“划-顶”和“划-底”)和一个“2em”水平填充(“划右”和“划左”)。“em”单元相对于元素的字体大小:“1em”等于使用的字体大小。

Making it clear that "vertical" refers to top and bottom and "horizontal" to left and right.

明确表示“垂直”是指上下和“水平”左右。

#2

There is a distinct difference between padding and margin. There is a great example which can be found here on Stack Exchange. Once you understand the difference, then you can look at the properties that each element supports; specifically top, bottom, right, and left.

填充和空白之间有明显的区别。在堆栈交换中可以找到一个很好的例子。一旦理解了差异，就可以查看每个元素所支持的属性;特别是顶部，底部，右边，左边。

CSS as a language is designed to be platform independent, and has nothing to do with origins in iOS, Android, etc. You can check out wikipedia if you're interested in the history of CSS

CSS作为一种语言是独立于平台的，与iOS、Android等的起源无关。如果你对CSS的历史感兴趣，你可以去*看看。

#1