CSS Inline-Block

The CSS inline-block property is a combination of the `inline` and `block` display properties. It allows an element to be formatted as an inline element but with block-level styling capabilities. This means that the element can sit next to other inline elements but also allows for width and height properties.

Understanding Inline-Block

An element with the inline-block value will:

• Be positioned inline with other elements, meaning they will be placed next to each other if space allows.
• Honor width and height properties, unlike `inline` elements.
• Respect vertical alignment settings, making it easier to align elements vertically.

Syntax

The syntax for the CSS display property with the inline-block value is:

/* Inline-Block Property Syntax */
selector {
    display: inline-block;
}

        

Examples

/* Basic Inline-Block */
.inline-block-example {
    display: inline-block;
    width: 150px;
    height: 100px;
    background: #f0f0f0;
    text-align: center;
    line-height: 100px;
}

            

/* Vertical Alignment */
.vertical-align-example {
    display: inline-block;
    width: 150px;
    height: 100px;
    background: #f0f0f0;
    vertical-align: top; /* Change to middle or bottom for different alignment */
    text-align: center;
    line-height: 100px;
}

            

/* Inline-Block with Margins */
.margin-example {
    display: inline-block;
    width: 150px;
    height: 100px;
    background: #f0f0f0;
    margin: 10px;
    text-align: center;
    line-height: 100px;
}