HTML provides a variety of tags that act as the building blocks for web pages. Some of the most common ones include <div>, <p>, <h1>, and <span>. These tags fall into two main categories: block and inline elements. Understanding how each type behaves is key to structuring and styling your content effectively—and it can save you a lot of time and frustration when certain styles don't seem to work the way you expect.

Block Element

A block element takes up the full width of its parent container and always starts on a new line. This makes block elements stack vertically, one after the other. Common block elements include:

• <div> (used for generic containers)

• <p> (paragraphs)

• <h1>, <h2>, etc. (headings)

• <section>, <article>, <header>

Inline Element

Inline elements, on the other hand, only take up as much space as their content requires (often based on the content's width, like max-content) and do not force a new line. They flow along with other elements in the same line of content. Common inline elements include:

• <span> (used for generic inline containers)

• <a> (links)

• <em>, <strong> (for emphasis and bold text)

Example Time!

We can see that a block element takes up the entire width of its container, while an inline element only takes up the maximum width of its content, and its width cannot be changed.

Inline-Block

Now, what if you want the best of both worlds—inline and block elements? This is where inline-block comes into play. An inline-block element behaves like an inline element (it doesn’t start a new line), but it also allows you to set its width and height, which you can’t do with regular inline elements. Inline-block elements are incredibly useful for layouts like navigation bars or flexible grid systems.

Let’s create some elements and each gives them a different display value.

.inline_box {
    display: inline;
    height: 2em;
}

.block_box {
    display: block;
    height: 2em;
}

.inline_block_box {
    display: inline-block;
    height: 2em;
}

Notice how we declare the height property for all the elements, but it doesn't affect the inline elements shown below.

Summary

We explored the differences between inline and block elements and introduced inline-block as a flexible option for layout styling. Below is a table summarizing today’s key points from 'A Bit of Mango,' learning bit by bit every day.