Why do inline-block elements render with extra spacing between them, even when no margin is applied?

The extra space comes from the whitespace characters in the HTML source code (spaces, tabs, line breaks) between the inline-block elements.

Since inline-block elements behave like inline text, the browser treats that whitespace just like the space between words in a sentence — resulting in a visible gap.