1

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

rmaddy
  • 314,917
  • 42
  • 532
  • 579
Clark Battle
  • 630
  • 1
  • 8
  • 16
  • 4
    It is the direction of padding - vertical padding is padding in the vertical direction, so top/bottom. Horizontal padding is padding in the horizontal direction, so left/right – Paulw11 Oct 27 '16 at 23:35
  • Thanks. Please dont downvote this question though. Without a definitive explanation (which Ive never seen) its easily confused. Let this question stand to help others who may have the same question but were too afraid to ask. – Clark Battle Oct 27 '16 at 23:39
  • 1
    I didn't downvote, but to be honest I have never found this concept particularly confusing. – Paulw11 Oct 27 '16 at 23:40
  • I actually assumed that it was the other way around until someone said they believed it to be like you said. Once I explained how it could be seen either way then even he became unsure. I generally define it as heightMargin and widthMargin, for clarity. – Clark Battle Oct 27 '16 at 23:55

2 Answers2

4

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.

Alohci
  • 78,296
  • 16
  • 112
  • 156
0

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

Community
  • 1
  • 1
Justin R.
  • 489
  • 1
  • 5
  • 12
  • 3
    How does this address the question? – connexo Oct 28 '16 at 00:05
  • Because his question is multi-part and it's also full of incorrect assumptions. I guess it would have been simpler to just downvote the questions since the answers he preferred basically read "vertical = up/down and horizontal = right/left". Which is not tantamount to anything educational at all on here. – Justin R. Oct 28 '16 at 15:04
  • This question is not multi part. I think that you just misunderstood it. The question clearly said that I understood the difference between margin and padding. That wasn't the question. The question was whether vertical margin refers to margin on the vertical edges of the view or to the vertical constraining of the view. – Clark Battle Oct 28 '16 at 18:35