CSS Inline Block

The display: inline-block property value is a mix between inline and block. It allows elements to sit next to each other on the same line while still accepting width, height, and vertical padding/margins.

Why Use Inline-Block?

Compared to display: inline, the major difference is that you can set specific dimensions. Compared to display: block, the difference is that it doesn't force a line break, so elements can sit side-by-side.

.box {
    display: inline-block;
    width: 150px;
    height: 100px;
    margin: 10px;
    background-color: #2e7d52;
}

Common Use: Navigation Menus

One of the most common applications for inline-block is horizontal navigation links.

nav li {
    display: inline-block;
}

nav a {
    padding: 10px 15px;
    display: block; /* So the link covers the whole li area */
}

Vertical Alignment

When using inline-block, elements might not align perfectly if they have different content heights. You can fix this with the vertical-align property.

.box {
    display: inline-block;
    vertical-align: top; /* Align to the top of the line */
}