Clark Battle Clark Battle - 1 month ago 15
CSS Question

What are vertical and horizontal padding/margin?

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.

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)?

Thanks

Answer

I don't believe the CSS spec normatively specifies this. But 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.