Why parent inline element have grater height, than the content it contains?
I have the following code:
Why
a tag has a height of 18.5px instead of 16px? span has the height of 16px, and I thought and expect the container to also be the height the size of the content (16px)
But for some reason, a tag is bigger, than the content. Why does it happen?33 Replies
the <a> and <body> also have a line-height.
and inline elements dont have an height or width of their own
you should also not set a line-height using a unit, just use a unitless number instead
by the way, the default is
normal, which should be about 1.2
the mdn docs recommend the samealso, I'm pretty sure line-height is the distance between two lines, but that ignores descenders like the tail on the
g that go below the line, which would cause the extra heightactually, they dont cause extra height: they just go under the line and on top of the text in the next line
and it looks fugly as all hell
Do you guys have any explanation, how the browser calculated the height of 18.5px? And how can I force it to be 16px? (without setting the actual height, and changing display to be block-lelvel element)?
I want the "a" tag to adjust it height based on the height of the content inside of it
16x1.2
it's equal 19.2
not 18.5
let me check something
the spec says that
normal is "the prefered line height automatically based on font metrics."
1.2 is a valid value, as well as 1.1 or 1.23456789 or 1.987654321got it
what can I do, to make
a tag the height of the child it contains?display: inline-block
or just ignore it and use a value that makes sense, like 1.15 or 1.2
by the way, 18.5 is 1.15625x16
adding the display: inline-block to "a" tag still causes the "a" tag to be the height of 18.5px
set the same line height to it
I want it to adjust it height, based on the height of it's content
Is it possible to achieve that, without explicitly setting the line-height on "a" tag?
display: inline-block should do it
as we saw, removing the
line-height: 16px from "a" tag, causes it to be 18.5px tallagain, you really shouldn't be setting line-height to a pixel value
generally avoid any pixel values with fonts like the plague, because it causes massive accessibility issues
yup, avoid them
1. Could you plz send me a link to a resource, that explains the diffs between using the pixel values vs unitless
2. Are there any other solution to make sure, that
a tag is the height of content inside of it, without setting the same line-height to it as the content inside of it?
I would have always one line of textthe mdn page explains it
then just do what i did: same line-height and display on both
or, better yet, if you arent going to do anything special to the <span> (like preventing new lines) than just remove the span and move the styles from the span to the <a>
Span is mandatory, because it's the component on it's own. And I want to use it. As I'm creating the component lib
Are there any other solution to make sure, that
a tag is the height of content inside of it, without setting the same line-height to it as the content inside of it?you can go the worst route of all and set the height to 1lh, which is 1x the line height
also, why are you trying to get the <a> to have the same height as the span?
I'm creating the breadcrumbs component. And the
a tag as you might expect contains the link in the breadcrumbs.
Between two links I have an icon. Container has the display of flex and align-items: center. Because of the fact, a is 18.5px and icon is 16px the icon is aligned incorrectly
container
-> link
-> icon
-> linkhave you tried to set a non-pixel size, like 1lh or 1ex?
not yet
try it
also, the text needs the line height
oww, sory
in prod I actually use rem values to set the line-height. I have the base of 16px
I used px values in reproduction only
thats fine, but you are trying to set a line-height equal to the font, and you really shouldn't do that
line-height exists to separate the text from multiple lines, and also prevents that some pieces arent outside the element size (like the bottom of the "g")
in other languages, you might see accents
so, i would stop messing with the line height, stop trying to get everything pixel perfect (which is as real as unicorns are) and just try to get the icon to be the right size
you should try setting the icon to 1ex
that is equal to the x-height of the font, which is about the height of the letter "x"
if you want bigger, try 1lh, which is 1 line-height of the parent element
@ἔρως thank you a lot for spending your time with me and explaining the solution to the problem ♥️
you're welcome
did you got what you wanted?