freeCodeCamp/guide/english/css/layout/inline-block/index.md

title

title
Inline Block

Inline Block

inline-block is a possible value of the display property. Elements marked as inline-block behave like inline elements (spans, for example), but can have width and height.

You can add inline-block to navigation so it is displayed horizontally instead of vertically.

HTML:

<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Me</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS:

.nav li {
  display: inline-block;
  padding: 20px;
}

More Information:

CSS-Tricks - inline-block