kaninchen
𝓫𝓲𝓻𝓭𝓲𝓮
I've been coding something and these two boxes have me absolutely stuck. I isolated them from their parent because I considered that maybe the flex was messing it up, but the problem persists. On CSS forums and whatnot, I can't find a very useful solution. Firstly, I cannot make them sit side by side WITHOUT using inline-block, which I think is normal, but I'm not sure. And second, what in the world is going on with their alignment? Changing height doesn't really fix it because it's still skewed.
Here's what I do know:
-line-height affects box placement even if contained. why? idk. but, even when the property is removed, they are not aligned.
-when the first box has NO text, the boxes are aligned.
-changing font size does not help, instead makes it worse?
Just looking for some guidance on this, because I run into this issue a lot and I want to know what to avoid!
code below:
Here's what I do know:
-line-height affects box placement even if contained. why? idk. but, even when the property is removed, they are not aligned.
-when the first box has NO text, the boxes are aligned.
-changing font size does not help, instead makes it worse?
“Basically what we have here is a dreamer. Somebody out of touch with reality.”
Just looking for some guidance on this, because I run into this issue a lot and I want to know what to avoid!
code below:
[border=1px solid tan; padding:5px; background:URL('https://www.clubdesfemmes.com/wp-content/uploads/2020/09/5281b72339e1dc5927b74384986f9d42.jpg'); background-size:cover; height:150px; max-width:230px; display:inline-block;][border=0; height:150px; max-width:230px; line-height:19px; letter-spacing:2px; text-transform:uppercase; color:wheat; font-size:18px][font='Abril Fatface']“Basically what we have here is a dreamer. Somebody out of touch with reality.”[/font][/border][/border][border=1px solid tan; padding:5px; height:150px;text-align:justify; width:300px; display:inline-block;][/border]