Css Inline-block

In CSS, inline-block is a value for the display property that combines features of both inline and block-level elements. When an element is set to display: inline-block, it behaves like an inline element in terms of flowing within the content, but it also retains block-level properties, allowing you to set width, height, margins, and padding.

Example

.inline example {
    display:   inline;
    width:   200px;
    height:   100px;
    margin:   10px;
    padding:   5px;
    border:   1px solid #000;
    background-color:   pink;
}

You can click on above box to edit the code and run again.

Output

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

Example

.inline-block example {
    display: inline;
    width: 200px;
    height: 100px;
    margin: 10px;
    padding: 5px;
    border: 1px solid #000;
    background-color: pink;
}

You can click on above box to edit the code and run again.

Output

Example

.block example {
    display: inline;
    width: 200px;
    height: 100px;
    margin: 10px;
    padding: 5px;
    border: 1px solid #000;
    background-color: pink;
}

You can click on above box to edit the code and run again.

Output

Using inline-block to Create Navigation Links

Certainly! Using inline-block is a common technique for creating horizontal navigation links. Here's a simple example:

Example

.navigation {
    background-color:  #333;
    padding:  10px;
    text-align:  center;
}

.navigation a {
    display:  inline-block;
    color:  white;v
    text-decoration:  none;
    padding:  10px 20px;
    margin:  0 10px;
    border-radius:  5px;
}

.navigation a:hover {
    background-color:  #555;
}

<body>

<nav class="navigation">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#>Services</a>
        <a href="#">Contact</a>
</nav>

</body>

You can click on above box to edit the code and run again.