Let's read a small 'tag' or 'chip' component and understand why inline-block specifically was chosen over block or inline.
.tag { display: inline-block; width: 100px; padding: 8px; background: #3E5AA6; color: white; }.
If this were plain <span> with no display change (the default, inline), width: 100px would be silently ignored inline elements refuse to respect explicit width, so the tag would just shrink to fit its text exactly.
If we'd used display: block instead, the tag would work fine with width, BUT it would insist on starting a fresh new line every time meaning three tags placed next to each other in the HTML would stack vertically, one per line, instead of flowing side by side like words in a sentence.
display: inline-block solves both problems at once: like inline, it can sit next to other inline or inline-block elements on the same line; like block, it fully respects width: 100px, padding: 8px, and would respect height and margin too if set.
In the HTML, <span class="tag">Tag</span> if you placed three of these spans one after another, they'd naturally flow side by side, each keeping its own fixed 100px width and padding, exactly like the tags/chips you see under blog posts or product filters on real websites.