Why does inline-block eliminate spaces by setting the font-size of the parent element to 0?

is the space here also a font? what is the reason why inline-block produces spaces? The space between the tags? There are only line breaks between tags, right? will the browser parse the line breaks into spaces?

Mar.16,2021

N methods for removing inline-block element spacing

for all questions that are close to css, you can first search Zhang Xinxu's blog and w3cPlus. If you can find it, read it first, and ask if you don't understand.


the baseline of the elements in the line is in trouble. The inline element display: inline; is similar to the default behavior of the text, with the bottom edge aligned with the baseline rather than the bottom edge of the container. Just set fontsize to 0.
Why white space is generated


I'm not sure if the cause of the space is a newline character, but removing the newline character does avoid this problem, such as the following code:

<a href="">test1</a>
<a href="">test2
</a><a href="">test3
</a><a href="">test4</a>
<a href="">test5</a>

I set all the an elements to inline-block , so there is no spacing between test2,test3,test4.

Menu