Comparison of display:inline-* properties - width, height, and text alignment

Demonstration of the similarities with a common height and width, and italicized text is center-aligned.

by David Partyka

HTML

<span class="inline-block"><i>Inline Block Parent</i></span>
<span class="inline-flex"><i>Inline Flex Parent</i></span>
<span class="inline-grid"><i>Inline Grid Parent</i></span>
<span class="inline-table"><i>Inline Table Parent</i></span>

CSS

span { height: 50px; width : 180px; color: #fff; border-radius: 5px; cursor: pointer; padding: 2px }

span:hover { opacity: 0.7 }

span.inline-block { display: inline-block; background: blue; text-align: center }

span.inline-flex { display: inline-flex; background: fuchsia ; justify-content: center }

span.inline-grid { display: inline-grid; background: green; justify-content: center } /* text-align: center will work here too */

span.inline-table { display: inline-table; background: teal; text-align: center }