CSS Layout - display: inline-block

Quiz

CSS display: inline-block

CSS inline-block is a value for the display property that allows elements to be formatted as block boxes that are laid out as inline boxes. Inline block elements start on the same line but take up multiple lines depending on the height and width of the element.

Display inline vs inline-block vs block Values

Here is an example differentiating inline, inline-block, and block:

This CSS tutorial covers everything from basic styling concepts and selectors to advanced techniques, such as flexbox, grid, animations, and CSS variables. This CSS tutorial is designed to help both beginners and experienced designers to make them masters in creating visually appealing, responsive, and modern web designs.

Characteristics of the inline-block Display in CSS

Here are some of the key characteristics of the inline-block property:

The 'display: inline-block' property is a combination of the 'display: inline' and 'display: block' properties.
The element will be displayed on the same line as other inline elements.
If there's not enough space on one line, the elements will wrap onto the next line, similar to words in a paragraph.
The element uses the width and height properties you set, unlike 'display: inline;', which ignores these properties.
The element can be floated or positioned.

Difference Between Inline, Block and Inline-block

The following table shows the difference between the 'display: inline', 'display: block', and 'display: inline-block' properties:

inline	block	inline-block
The element is displayed on the same line.	The element is displayed on a new line.	The element is displayed on the same line.
It does not take up the full width of the container.	It takes up the full width of the container.	It does not take up the full width of the container.
It does not have a margin or padding by default.	It has a margin and padding by default.	It has a margin and padding by default.

CSS inline and block Example

Here's an example that demonstrates the different behaviors of the 'display: inline', 'display: block', and 'display: inline-block' properties.

Example

In this example, we have used an inline tag i.e. span tag to specify an inline element. Then we used inline, block, and inline-block values to see the difference between them.

<html>

<head>
    <style>
        span{
            background-color: #1f9c3f;
            border: 2px solid #000000;
            color: #ffffff;
            padding: 5px;
            height: 30px;
            text-align: center;
        }
        .inline {
            display: inline;
        }
        .block {
            display: block;
        }
        .inline-block {
            display: inline-block;
        }
    </style>
</head>

<body>
    <h2>Display Inline</h2>
    <div>
        There are many variations of passages of Lorem Ipsum 
        available, <span class="inline">TutorialsPoint
        </span>, by injected humour, or randomized words 
        which don't look even slightly believable.
    </div>

    <h2>Display Block</h2>
    <div>
        There are many variations of passages of Lorem Ipsum 
        available, <span class="block">TutorialsPoint
        </span> ,by injected humour, or randomized words 
        which don't look even slightly believable.
    </div>

    <h2>Display Inline Block</h2>
    <div>
        There are many variations of passages of Lorem Ipsum 
        available, <span class="inline-block">TutorialsPoint
        </span> by injected humour, or randomized words 
        which don't look even slightly believable.
    </div>
</body>

</html>

Navigation Links Using inline-block

To create a horizontal navigation menu or list, you can use the inline-block property value where each navigation item is displayed as a block-level element but remains inline with other items.

Example

In this example, we have used the inline-block property value to create a horizontal navigation bar with four links using an anchor tag.

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

<head>
    <style>
        .nav-item {
            display: inline-block;
            padding: 10px 20px;
            margin: 5px;
            background-color: rgba(3, 25, 38, 0.9);
            color: white;
            text-decoration: none;
            border-radius: 5px;
        }

        .nav-item:hover {
            background-color: rgba(3, 25, 38, 1);
            cursor: pointer;
        }
    </style>
</head>

<body>
    <nav>
        <a class="nav-item">Home</a>
        <a class="nav-item">About</a>
        <a class="nav-item">Services</a>
        <a class="nav-item">Contact</a>
    </nav>
</body>

</html>

Print Page