Goal

You’ll be able to predict how an element behaves in the page flow just from knowing its display type, understand why the browser chose these particular defaults, and know when to deliberately override them.

Learn

Every HTML element has a default display type that controls two fundamental things: whether it starts on a new line, and whether it respects width/height settings you give it.

• Block (like <div>, <p>, <h1>) — takes up the full width available by default, always starts on a new line (pushing whatever comes after it down), and fully respects width and height.
• Inline (like <span>, <a>, <strong>) — only takes up as much width as its content actually needs, flows within a line of text like a word would, and ignores width/height settings entirely — visually, it behaves more like a piece of text than a box.
• Inline-block — a hybrid: flows inline like text (sitting next to other inline content, not forcing a new line), but respects width and height like a block does. This combination is genuinely useful and used often, for things like nav items, badges, or small cards that need to sit in a row but also need a fixed size.

Why do these defaults exist at all? Think about what each element is semantically for. A <span> is meant to wrap a small piece of text inside a sentence — forcing it to always start a new line would break normal reading flow. A <div> is meant to be a structural container — starting a new line and taking full width makes sense for organizing a page into sections. The defaults aren’t arbitrary; they match each element’s intended purpose.

You can always override an element’s default display type with the display property. This is common and expected — for example, turning a list of navigation links (naturally block-level <li> elements, stacking vertically by default) into a horizontal row using display: inline-block; or, more commonly today, Flexbox, which you’ll learn shortly.

Decision Task

You set width: 100px; height: 40px; on a <span> (inline by default) and nothing happens visually — it stays its natural content size. Before reading on: why doesn’t the width/height take effect, and what’s the simplest one-line fix?

Reveal the Answer

Inline elements ignore width and height by design, since they’re meant to flow with text, not act as fixed boxes. The fix: add display: inline-block;, which keeps it flowing inline (not forcing a new line) but makes it respect the dimensions you set.

Common Mistake

Developers sometimes reach for display: block; when inline-block was actually what they wanted, then get confused when their element unexpectedly jumps to its own full-width line, breaking a row of items that should sit side by side. The two look similar in name but behave very differently in a row-based layout.

Practice Questions

1. A <div> (block by default) needs to sit inline next to a piece of text and also have a fixed width. Which display value achieves both requirements?

Show Answer

inline-block.

2. Why does forcing width/height onto a plain inline <span> not work, tracing back to what inline elements are actually meant to represent?

Show Answer

Inline elements are meant to flow like text within a sentence; respecting explicit width/height would conflict with that text-flow purpose, so the browser ignores those properties for inline elements by design.

3. You have five <li> items inside a <ul> that currently stack vertically. Name one display-related fix (not involving Flexbox) that would make them sit in a horizontal row instead.

Show Answer

Set each <li> to display: inline-block.

4. True or False: an inline-block element will still start on a new line, the same as a block element.

Show Answer

False — inline-block flows inline, sitting next to other content rather than starting a new line.

5. Explain why HTML’s default display types aren’t arbitrary, using two specific element examples from this lesson.

Show Answer

<span> is meant for small inline text emphasis, so it flows like a word (not forcing new lines); <div> is meant as a structural section container, so it takes full width and starts a new line, matching how sections are typically organized on a page.

Try It Yourself

You have three <span> elements that need to sit side by side, each with a fixed width and a background color, like small tags. Which display value do you need?

Show Answer

inline-block — block would force each onto its own line, plain inline would ignore your width setting.

Quick Check

1. Which display type ignores width and height settings?

Show Answer

Inline.

2. Which display type always starts on a new line?

Show Answer

Block.

3. What display value gives you a fixed-size element that still flows inline with other content?

Show Answer

Inline-block.

4. You have three <span> elements that need to sit side by side, each with a fixed width and a background color, like small tags. Which display value do you need?

Show Answer

inline-block — block would force each onto its own line, plain inline would ignore your width setting.

5. You set width: 100px; height: 40px; on a <span> (inline by default) and nothing happens visually — it stays its natural content size. Before reading on: why doesn’t the width/height take effect, and what’s the simplest one-line fix?

Show Answer

Inline elements ignore width and height by design, since they’re meant to flow with text, not act as fixed boxes. The fix: add display: inline-block;, which keeps it flowing inline (not forcing a new line) but makes it respect the dimensions you set.