CSS Inline-Block - Detailed Overview

Introduction to CSS Inline-Block

The display: inline-block; property allows an element to be formatted as an inline-level block container. It is similar to display: block; in that it respects width and height properties but does not force a line break like block elements do. Instead, it allows elements to sit next to each other on the same line, like inline elements.

Inline-Block Example

Here is an example of using display: inline-block; to create elements that sit next to each other:

.inline-block-item {
    display: inline-block;
    width: 150px;
    height: 100px;
    margin: 10px;
    text-align: center;
    line-height: 100px;
    color: #fff;
    font-weight: bold;
}

Comparison with Block and Inline

Compare the behavior of inline-block with block and inline:

.block-item {
    display: block;
    width: 150px;
    height: 100px;
    margin: 10px;
    background-color: #f0a0a0;
}

.inline-item {
    display: inline;
    width: 150px;
    height: 100px;
    margin: 10px;
    background-color: #a0f0a0;
}