When compared to display: inline, the notable distinction is that display: inline-block permits setting both width and height for the element.
Additionally, top and bottom margins/paddings are respected with display: inline-block, unlike display: inline where they are not.
In contrast to display: inline, display: inline-block does not introduce a line break after the element, allowing it to sit adjacent to other elements.
The subsequent example illustrates the contrasting behaviors of display: inline, display: inline-block, and display: block.
Example
|
span.a { |
A prevalent application of display: inline-block is to present list items horizontally rather than vertically. The ensuing example demonstrates the creation of horizontal navigation links:
Example
|
.nav { |
