The Secret CSS Padding Trick!

Everyone knows CSS Padding and use it for element spacing. But do you know padding can be used to preserve an element aspect ratio? Let's find out in this tutorial!
=== Follow us on ===

#CSSTrick #WebDesign #CSS

[Andrey-ilrh]

I'm writing css for more than 10 years but never heard about such trick. You've got my subscription 👍

[DVincent]

holy shit... this was hours of research taking up my day for you to explain it effortlessly in 3 minutes!!! Thank you!!!

(I would have found it sooner if the title wasn't so vague though, that's my only gripe. If it was titled "scale div proportionally" or "scale div maintaining aspect ratio" I would have found it faster)

[turolretar]

To add to this, the padding can also be based on the container height, if you change the writing mode to vertical. Not many know this and I feel like this trick can be used for something cool. I’ve even made a two way aspect ratio box that gets resized when changing both the viewport width and height. Not sure what the practical use of it is, but I think it may be useful for full screen apps or something like that

[bLitzKinG]

Thank you so much. Because of this video I've created a web design that is responsive starting from 640px to 2560px and beyond in just one media query!

[chozi]

the wrapper div, the position absolute and all that, has a simpler solution, which is use a padding-block instead of padding-bottom, and divided by two the value of padding-bottom

[dhaloh]

Epic tutorials man! Really helpful tips!!!!

[hanschris]

THANK YOU SO MUCH YOU SAVE FROM A BIG GOD BLESS YOUUU!!!

[adrianojedaf]

Thank you! I was trying to understand this good and it helped me! +Sub

[kazim]

Can you make a resizable rectangle in css and it should at the same time display the size in inches
Let me know please
Thanks

[marcosansalone]

where can I find the source code? The link in the description is not working.

[gianniskoulouris]

Yeah but what happens if the content of the box is bigger than the container. For example if the content is text, it will overflow in smaller resolutions.

[matiasvarelar]

hi, just one doubt. This doesn't gets the same result? max-width: 100%;
height: auto;
??

[ThuHuyen-qwnn]

sir, why don't we use padding-top instead of padding-bottom?

[PasqualItizzz]

One day I'll post a constructive comment, that's relevant and useful.

But it is not today.

[biswajitdasyt]

YouTube use this for their video thumbnails

[hassuunna]

Good trick for pages with just two boxes 😁
Bad trick for websites with many content

[patrykbielewicz]

I fall asleep listening to your voice. More expression