How does inline-block differ from inline?

The main differences between inline and inline-block display properties in CSS are related to how they handle dimensions, spacing, and layout behavior. Here are the key distinctions:

1. Dimensions:

Inline: Elements with display: inline do not accept width and height properties. Their size is determined by the content inside them.
Inline-Block: Elements with display: inline-block can have width and height properties set, allowing for more control over their size.

2. Spacing:

Inline: Inline elements do not respect vertical margins and padding in the same way block elements do. They flow with the text and can cause issues with spacing.
Inline-Block: Inline-block elements respect vertical margins and padding, allowing for better control over spacing around the element.

3. Layout:

Inline: Inline elements flow within the text and do not start on a new line. They can only be placed next to other inline elements or text.
Inline-Block: Inline-block elements can sit next to each other horizontally, but they also behave like block elements in that they can have their own dimensions and spacing.

Example:

Here’s a comparison example:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline vs Inline-Block</title>
    <style>
        .inline-element {
            display: inline;
            background-color: lightblue;
            padding: 10px;
            margin: 5px;
        }
        .inline-block-element {
            display: inline-block;
            background-color: lightcoral;
            padding: 10px;
            margin: 5px;
            width: 100px; /* Width is respected */
            height: 50px; /* Height is respected */
        }
    </style>
</head>
<body>
    <span class="inline-element">Inline Element 1</span>
    <span class="inline-element">Inline Element 2</span>
    
    <div class="inline-block-element">Inline-Block Element 1</div>
    <div class="inline-block-element">Inline-Block Element 2</div>
</body>
</html>

Summary:

Use inline for elements that should flow with text and do not require specific dimensions.
Use inline-block when you need elements to sit next to each other while also having control over their size and spacing.