CSS Inline-block

Inline-block is a useful display property in CSS that allows elements to sit next to each other horizontally like inline elements, but also have the block characteristics such as being able to set width and height.

Here's an example:

<div style="display: inline-block; width: 100px; height: 100px; background-color: red;"></div>
<div style="display: inline-block; width: 100px; height: 100px; background-color: blue;"></div>
<div style="display: inline-block; width: 100px; height: 100px; background-color: green;"></div>

In the above example, we have three inline-block elements with different background colors, and they are displayed next to each other horizontally.

One common use case for inline-block is creating navigation menus. Here's an example:

<ul>
  <li style="display: inline-block; padding: 10px; background-color: #333; color: #fff;">Home</li>
  <li style="display: inline-block; padding: 10px; background-color: #333; color: #fff;">About</li>
  <li style="display: inline-block; padding: 10px; background-color: #333; color: #fff;">Services</li>
  <li style="display: inline-block; padding: 10px; background-color: #333; color: #fff;">Contact</li>
</ul>

In this example, we have created a simple horizontal navigation menu using inline-block elements.

Another use case for inline-block is creating a grid layout. Here's an example:

<div style="width: 33.33%; display: inline-block;">
  <img src="image1.jpg" alt="Image 1" width="100%">
  </div>
  <div style="width: 33.33%; display: inline-block;">
    <img src="image2.jpg" alt="Image 2" width="100%">
    </div>
    <div style="width: 33.33%; display: inline-block;">
      <img src="image3.jpg" alt="Image 3" width="100%">
      </div>

In this example, we have created a simple grid layout with three columns using inline-block elements.

Overall, inline-block is a versatile display property in CSS that is useful for creating horizontal layouts, menus, and grid systems.