Block vs inline elements.
Which ones take full width.
Every HTML element has a default display value. Block elements take the full width of their container and start on a new line. Inline elements take only as much width as their content and flow with the surrounding text. This is the single most important layout distinction in HTML — and the reason width: 100px does nothing on a .
Short answer: Block elements (<div>, <p>, <h1>, <section>) take full width and stack vertically. Inline elements (<span>, <a>, <strong>, <code>) take only their content width and flow within text. width and height don't apply to non-replaced inline elements — use display: inline-block or display: block to change that.
✅ The two categories
What you get by default.
Block
Takes full width. Starts on a new line. Accepts width, height, margin, padding. Examples: <div>, <p>, <h1>, <ul>, <section>, <article>.
Inline
Takes only content width. Flows with text. Does not accept width or height (non-replaced). Accepts horizontal margin/padding but not vertical. Examples: <span>, <a>, <strong>, <em>, <code>.
Inline-block
Hybrid. Flows with text like inline, but accepts width, height, margin, padding like block. Examples: buttons, nav items, inline cards.
Replaced elements
<img>, <video>, <input> are inline but accept width and height — their content is external. This is the exception to the rule.
✅ Before and after
The same markup, different display values.
<span style="width: 200px; height: 100px; background: orange;"> I'm a span. </span>
❌ Width and height are ignored. ❌ Only the background paints, sized to the text. ❌ Span stays inline, sized by content.
<span style="display: inline-block; width: 200px; height: 100px; background: orange;"> I'm a span. </span>
✅ Width and height apply. ✅ The element still flows inline with text. ✅ Background fills the full 200×100 box.
<style>
.link {
display: block;
padding: 10px;
background: #eee;
margin-bottom: 4px;
}
</style>
<a class="link" href="/">Home</a>
<a class="link" href="/about">About</a>
<a class="link" href="/contact">Contact</a>
✅ Each link becomes a full-width block. ✅ Stacked vertically instead of inline. ✅ Common pattern for vertical navigation menus.
inline-block for buttons
Buttons, nav items, and inline cards need to sit next to each other but accept padding. inline-block is the classic fix.
Flexbox is better for layout
For real horizontal layouts, use display: flex. It handles gaps, alignment, and wrapping without whitespace quirks.
Images are replaced
<img> is inline but accepts width and height. It's a replaced element — its content comes from outside.
Whitespace between inline-block
Inline-block elements have a small gap between them in the HTML source. Fix: remove whitespace, or use flexbox.
⚠️ Common mistakes
The block/inline mistakes that cost real time.
span {'{ width: 200px; }'} — no effect. Fix: display: inline-block or display: block.
An <a> is inline by default. Fix: display: inline-block or display: block, then add padding for tappable area.
It applies visually but doesn't push surrounding lines. Fix: display: inline-block for layout.
Divs are block — they stack. Fix: display: inline-block, flex, or grid on the parent.
Whitespace quirks, vertical-align headaches. Fix: display: flex for horizontal layouts, grid for 2D.
Images have a small baseline gap below them. Fix: display: block on the image, or vertical-align: middle.
Flex children are blockified — width works. But the child's own inline children still need their own display rule.
Inline: no width/height. Inline-block: width/height work. Fix: pick based on whether you need explicit sizing.
❓ Frequently asked
What is the difference between block and inline elements?
Block elements take the full width of their container and start on a new line. Div, p, h1–h6, section, article, header, footer, ul, li are block. Inline elements take only as much width as their content and flow within the surrounding text. Span, a, strong, em, code, img are inline. Width and height do not apply to non-replaced inline elements. The default display value is what determines this — the HTML element itself is just a tag.
Can I change an element from block to inline?
Yes, with CSS. The display property controls layout behavior: display: block makes an element take full width and start on a new line. display: inline makes it flow with text. display: inline-block keeps it inline but allows width and height. display: flex / grid makes it a container for its children. The HTML tag's default display is a starting point, not a rule.
Why does width not work on a span?
Span is an inline element. Width and height do not apply to non-replaced inline elements — they only take up as much space as their content. Three fixes: (1) display: inline-block — stays inline but accepts width and height. (2) display: block — becomes a block element. (3) Wrap it in a block element with the width. The default is inline because span is meant to style a range of text without breaking the flow.
What is inline-block?
Inline-block is a hybrid: the element flows with text like an inline element, but it accepts width, height, margin, and padding like a block element. Use it for buttons, navigation items, and inline cards that need to sit next to each other. Before flexbox, inline-block was the main way to build horizontal layouts. Flexbox is generally better now, but inline-block is still useful for small inline UI elements.