Vertical align seems to fight Flexbox

[roblevintennis]

Heya @AustinGil :)

I suppose this is obvious when you see it, but I just debugged some code where I had previously centered an icon due to align-items but then having copied curated pieces of bedrocss into my own reset.css and/or opinions.css, the vertical-align: middle appears to fight against Flexbox align-items and friend:

...
svg {
  vertical-align: middle; /* removes weird space below images */
...

https://github.com/AustinGil/bedrocss/blob/master/src/media.css#L5

---

Visual context

Here's the before / after behavior (note the checkmark's vertical centering against the input height):

I suppose the question would be is it more or less likely that I'm going to be applying flexbox alignment to one of these media 🤔 e.g. do I just make the single override e.g. unset or initial, or, should this not be in the reset ❓ I'm not sure I have an answer -- any thoughts from your end?

[AustinGil]

I see. So you think it's better to remove SVG from that rule?

[roblevintennis]

Yeah, it would seem reasonable, but I'm wondering if maybe others like img might often use flexbox centering too and I honestly don't know for certain. This is the type of thing I do like once every few months so I don't recall 😋 I suppose you could ask the question which of these is likely to NOT get flexbox aligned?

In this case, since my issue is deep within an Icon component code that's within another Input component, it was hard to just do unset so I opted to just removed the vertical-align middle from my demo app's globals (which I've hand moved over these sorts of things). Luckily, I've opted to copy in this "opinion" into my global.css (it's an Astro app) -- so I just changed it to this:

:where(img, picture, svg, canvas, video, iframe) {
  max-inline-size: 100%;
  block-size: auto;
}

[AustinGil]

Yeah, I'd leave it on img for sure, but easy enough to remove from SVG. SVG is really just there for the other rules, but img for sure should have that vertical align.

[roblevintennis]

Ok, I'll go back and put it in and just remove SVG -- thanks! Feel free to leave open or close :)

[AustinGil]

Yeah, I defo think this one does more harm than good in it's current state. Thanks for reporting