Prev Next

CSS Inline-block

display: inline-block; elements sit next to each other like inline elements but retain block-like properties, allowing you to set width, height, and vertical padding/margins. This is handy for horizontally arranging buttons, menu items, or small content blocks without using floats.

Key Topics

  • Combining Block and Inline Behaviors
  • Creating Horizontal Menus
  • Avoiding Float-based Layouts

Example

Set display: inline-block; to several elements, and they line up horizontally without floats.

.item {
    display: inline-block;
    width: 100px;
    height: 50px;
    background: #ddd;
    margin: 5px;
    text-align: center;
    line-height: 50px;
}

Explanation: Each item has a set width and height but appears inline, forming a row of equally-sized boxes without using floats.

Key Takeaways

  • Versatility: Inline-block elements are more flexible than inline or block alone.
  • Simple Layouts: Use inline-block for menus, toolbars, and item grids.
Prev Next