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.
Let's 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.
Consequently, my questions are:
Is there an accepted standard for which edges are considered "vertical padding/margin" and which are "horizontal padding/margin"?
Additionally, what is the origin of this standard (CSS, HTML, android/ios layout, inDesign, etc)?
I'm aware that this is a bit off-topic for the title, but it might help to provide an explanation of why it is what it is.
Thanks.
I don't believe the CSS specification normatively specifies this. However, it does provide an example in section 8.4 Padding properties. It says:
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.
Making it clear that "vertical" refers to top and bottom, and "horizontal" to left and right.