Isn’t that a perfect square, 500px × 500px? Yes, it is! An aspect ratio! So if you had an element that is 500px wide, and padding-top of 100%, the padding-top would be 500px. This isn’t a hack, but it is weird: padding-top and padding-bottom is based on the parent element’s width. The Core Concept: padding in percentages is based on widthĮven when that is a little unintuitive, like for vertical padding. Let’s go on a little journey through this concept, as there is plenty to talk about. I think the original credit goes as far back as 2009 and Thierry Koblentz’s Intrinsic Ratios and maintained popularity even for other kinds of content with articles like Uncle Dave’s Ol’ Padded Box. I had a little situation the other day where I needed to make one of those aspect-ratio friendly boxes.
0 Comments
Leave a Reply. |