css

Inline vs inline-block Display in CSS


In this article, we will see the difference between Inline vs. inline-block

The display property defines how the components are going to be placed on the web page.

Contents

Syntax

display: value;

Inline-block

  • Allows setting a width and height on the element.
  • The top and bottom margins/paddings are respected.
  • Does not add a line-break after the element, so the element can sit next to other elements.
  • It is used to display an element as an inline-level block container.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline vs Inline-block</title>

    <style>
        html, body {
            margin: 0;
            padding: 0;
        }

        .menu{
            list-style-type: none;
            text-align: center;
            background-color: red;
        }

        .menu li {
            display: inline-block;
            padding: 25px;
            font-size: 25px;
        }
        span {
            display: inline-block;
            width: 100px;
            background-color: blue;;
            height: 100px;
        }
    </style>

</head>
<body>
    

    <h1>Menu Bar - with inline-block</h1>

    <ul class="menu">
        <li>Home</li>
        <li>Services</li>
        <li>About Us</li>
        <li>Contact Us</li>
    </ul>

    <p>This is a simple <span>text</span> with inline-block.</p>

</body>
</html>

Output

Inline-block

Inline

  • It is used to displays an element as an inline element.
  • An inline element does not start on a new line and only takes up as much width as necessary.
  • Any height and width properties will have no effect.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline vs Inline-block</title>

    <style>
        html, body {
            margin: 0;
            padding: 0;
        }

        .menu{
            list-style-type: none;
            
            background-color: red;
        }

        .menu li {
            display: inline;
            padding: 25px;
            font-size: 25px;
        }
        span {
            display: inline;
            width: 100px;/* won't have any effect */
            background-color: blue;;
            height: 100px; /* won't have any effect */
        }
    </style>

</head>
<body>
    

    <h1>Menu Bar - with inline</h1>

    <ul class="menu">
        <li>Home</li>
        <li>Services</li>
        <li>About Us</li>
        <li>Contact Us</li>
        <li>Item#</li>
        <li>Item#</li>
        <li>Item#</li>
        <li>Item#</li>
        <li>Item#</li>
        <li>Item#</li>
        <li>Item#</li>
        <li>Item#</li>
        <li>Item#</li>
        <li>Item#</li>

    </ul>

    <p>This is a simple <span>text</span> with block.</p>

</body>
</html>

Output

Display with inline
Inline

Conclusion

You can use it to set whether an element is treated as a block or inline part and the layout used for its children, such as flow layout, grid, or flex.
Thanks for reading!


Share on social media

//