weird space on top with svg in label
https://play.tailwindcss.com/OZEAWyNk9X
in the linked code there seems to be some space on top when i add the svg inside the label. it goes away if i put display flex on outermost div but I can't figure out what is happening here
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
23 Replies
I think that that may be related to the checkbox. If you use the Tailwind class
sr-only to hide the input rather than your current method that space goes away.Oh that does work didn't know this class.
Although I am curious for the reason for this anyway
Input should be an inline element so I'm not sure why it's causing new lines
Or i guess the lable is cause it cause that is block
The reason that
sr-only works is because of position: absolute which actually removes the element from the normal flow so it doesn't take any spaceSetting inline or inline block on svg also works
So I assume by default it's block and causes itself to render on new line
Not really if you notice you will still have a space before the svg
That's because I'm stupid and the pen is using className instead of class on label. If label is flex container it doesn't work because flex also renders on new line i think
For the input element itself it's an inline level element but I'm guessing there is something to do with how the browser renders it exactly, as if you try to do the same styles you applied to your input to a span which is also an inline element you will not have that space
Oh, interesting
Well sr-only is probably the best solution here. I'll take that for now
Well if you just want to remove it completely you can use
display: none which is hidden in tailwindNo i want it to be focusable with keyboard and screenreader just not get displayed
I would've just used background image on the input for the icon but I'm using lucide icons library and i don't think that allows importing in tailwind
Well, if you ever figure out the reason why exactly the input element takes this space please comeback and explain it🙌
then use
::before and ::after instead, with the svg as a background
and appearance: none (and the mandatory -webkit-appearence too)I think that runs into the same problem of not being usable with the icon library
Lucide react imports svg as a react component that returns svg as element rather than a url to some img file
I could stop being lazy and download the svg I guess but then there's no point in icon library
you might need to
Hmm. What is wrong with using svg inside label btw? The icon is mostly for sighted user so it should work right, since I also have text inside label too
Also why use pseudo element instead of background image directly on the input
you can do it in the input directly too
nothing
Alright. I'll see what to do later. I'm not using many icons (4-5 only) so maybe just ditch the dependency and download svgs for everything
you can make all 4-5 svgs into a single svg
What do you mean
use symbols
No i mean when I'm using them in img tags or background image url how would that work?
If they're all different icons and in a single svg
you can use a
#name for the symboli'll try it out