CSS Inline-block

Last Updated : 14 Oct, 2024

The display: inline-block property allows you to apply both width and height to an element, similar to how block elements work. Unlike the display: inline property, which only respects left and right margins/paddings, display: inline-block respects the element's full margins and paddings (including top and bottom).

This property is commonly used to arrange elements, such as list items, horizontally rather than vertically.

Syntax

display: inline-block;

Example of CSS inline-block property

Here are a few examples demonstrating how the inline-block property works compared to inline and block:

1. Comparing inline, block, and inline-block

This example demonstrates the behavior of elements using display: inline, display: block, and display: inline-block.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>CSS inline-block</title>
    <style>
        .divelement>div {
            display: inline-block;
            color: green;
            font-size: 20px;
            margin: 10px;
            font-weight: 700;
        }

        .example3 > span {
            display: block;
            margin: 10px;
            color: rgb(183, 22, 22);
            font-weight: 700;
        }

        .example2>div {
            display: inline;
            font-weight: 700;
            color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="divelement">
        <div>MERN</div>
        <div>MEAN</div>
        <div>DSA</div>
        <div>MEVN</div>
    </div>
    <p>
        The above elements have the
        property display with value
        inline-block
    </p>

    <div class="example2">
        <div>MERN</div>
        <div>MEAN</div>
        <div>DSA</div>
        <div>MEVN</div>
    </div>
    <p>
        The above block elements "div" have the
        property display with value
        inline.
    </p>

    <div class="example3"
         style="margin-top: 20px;">
        <span>MERN</span>
        <span>MEAN</span>
        <span>DSA</span>
        <span>MEVN</span>
    </div>
    <p>
        The above inline elements "span" have the
        property display with value
        block.
    </p>
</body>

</html>

Output:

2. Comparison Between inline-block and Block

The following example compares elements with display: inline-block and their default block behavior.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>CSS inline-block</title>
    <style>
        .divelement > div {
            display: inline-block;
            color: green;
            height: 50px;
            width: 70px;
            font-size: 20px;
            margin: 10px;
            font-weight: 700;
        }

        p {
            margin-bottom: 50px;
        }
    </style>
</head>

<body>
    <div class="divelement">
        <div class="div">MERN</div>
        <div class="div">MEAN</div>
        <div class="div">DSA</div>
        <div class="div">MEVN</div>
    </div>
    <p>
        The above element have the
        property display with value
        inline-block
    </p>

    <div>
        <div class="div">MERN</div>
        <div class="div">MEAN</div>
        <div class="div">DSA</div>
        <div class="div">MEVN</div>
    </div>
</body>

</html>

Output:

Difference between Inline-block, Block and Inline

Inline-block	Block	Inline
Inline-block is quite similar to `inline`, but we can have the flexibility to give width, height, and vertical margins.	The block takes the full width.	Inline ignores width and height.
Inline-block respects both horizontal and vertical whitespace.	The block respects both horizontal and vertical whitespace	Inline ignores vertical whitespace.
Inline-block is used when the elements need to flow inline but retain block-level styling.	The height and the width can be defined.	Inline only takes only the necessary width. It does not start on a next line.

What is HTML DOM ?

shivanigupta18rk

Improve

Article Tags :

CSS Inline-block

Syntax

Example of CSS inline-block property

1. Comparing inline, block, and inline-block

2. Comparison Between inline-block and Block

Difference between Inline-block, Block and Inline

Similar Reads

Thank You!

What kind of Experience do you want to share?