Using display: inline-block in CSS
display: inline-block allows an element to flow inline with text and other inline elements, while still behaving like a block element in terms of width, height, margin, and padding.
The element does not start on a new line and can sit next to other inline elements.
Width and height can be applied and respected (unlike pure inline elements).
Top and bottom margins and padding are applied normally.
Useful for buttons, cards, or any elements that need inline flow but block-like styling.
In this example, the two <span> elements sit next to each other like inline elements but have block-like width, height, and spacing.
Use
inline-blockwhen you need elements to align horizontally but still have controllable dimensions.Be aware of whitespace between inline-block elements; it can be removed with HTML comments or CSS tricks.
For more complex alignment or responsive layouts, consider using Flexbox (
display: flex) or Grid (display: grid) instead.