What's the difference between padding-top: 56.25%; / padding-bottom: 56.25%;

HTML & CSS
1

What’s the difference between padding-top: 56.25%; / padding-bottom: 56.25%;

I keep seeing this written with either bottom or top.

Why do some put bottom and why top?

Is one way better or more proper?

https://jsfiddle.net/cjx3vrbg/

.curtain-ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  background: transparent;
}

https://jsfiddle.net/4e7ygv23/

.curtain-ratio-keeper {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  background: transparent;
}
2

There’s no difference when there is no content so either can be used but padding-top is less characters to write than bottom

3 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.