The Secret CSS Padding Trick!

Aug 15, 2023

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!
Source Code: https://redstapler.co/preserve-aspect…
=== Follow us on ===
Facebook: https://www.facebook.com/theRedStapler
Website: http://redstapler.co/
Twitter: https://twitter.com/redStapler_twit

#CSSTrick #WebDesign #CSS

Content

0 -> padding is a CSS property that is used to generate space around HTML element

4.71 -> and probably one of the most used property but do you know the padding

8.309 -> can be used for more than just adding space and this tutorial we will show you

11.73 -> the CSS padding trick to create preserved aspect ratio element for responsive

16.56 -> design ready let's check it out so I have this box on a page with fixed size

28.529 -> for the three aspect ratio if we resize the browser window the box will stay the

34.739 -> same because the fixed size in pixels this is not good for responsive design

38.79 -> if we want the box to auto resize the simple solution is to define width and

43.98 -> height as a relative value like percentage this works fine for most of

48.3 -> the time but if you want the box to auto resize and still maintaining aspect

52.89 -> ratio then you will need to use padding simply set the height to zero and add a

57.809 -> percentage padding bottom and that's it

69.12 -> here's the secret percentage padding-bottom is always based on width

74.17 -> of the container and unlike margin the space generated from padding are also

86.32 -> considered part of that element so if we set the height to zero and use only

91.33 -> padding to define the height of the element we will be able to lock the

95.5 -> aspect ratio so if we want to create let's say element at 16 to 9 aspect

100.99 -> ratio will need to set the padding bottom to the width multiplied by 9 and

105.88 -> divide by 16 now there is a minor problem with this method since all the

117.28 -> height are generated by padding all the content will be pushed to the top so if

122.289 -> we use a flex layout to vertically center the content it won't work

134.05 -> to fix this we will need to create a container inside to wrap the content

147.04 -> then use absolute position to put it back into place

159.68 -> then move the flex setting to the wrapper instead we also need to set the relative

167.37 -> position to the main box to support the absolute position of the child element

172.55 -> and now if we set the child element size to percentage we also have the same

180.15 -> aspect ratio with all the resize and as all for this video if you want to see

187.769 -> more development tips and tutorials don't forget to subscribe this channel

191.04 -> for weekly update thanks watching see you next time bye

Source: https://www.youtube.com/watch?v=hp-jkoPkWH0