How To Set Same Height As Width In CSS
I am pretty sure this is a frequently asked question from frontend beginners like me...
HaHa~ Four Square Boxes Sit In A Row
I want to create square boxes, however, it really bothered me for a while.
<div className="inline-block relative w-1/4">
<div className="absolute top-0 bottom-0 left-0 right-0 border-2"></div>
The key to success is a magic
mt-[100%]. It works because when using margin/padding-top/bottom with percentage, the value is determined according to the width of the containing element which is
width: 25%in my code. Essentially, we have a situation where "vertical" properties can be sized with respect to a "horizontal" property. This isn't an exploit or a hack, because this is how the CSS specification is defined.
<div className="relative w-1/4 aspect- border-2"></div>
Yes! You can actually solve this century problem with a simple
aspect-, which repesents
aspect-radio: 1;in CSS.
Thanks to modern browsers, this solution is elegant and easy to understand, and here is the browser compatibility:
Browser Compability Of aspect-ratio