HTML Block & Inline

Every HTML element on a web page has a default display value, which determines how it occupies space and interacts with the elements around it. There are two primary behaviors you must understand to master web layout: block-level and inline.

Block-level Elements

A block-level element acts like a greedy container. It always starts on a fresh, new line, and stretches horizontally as far as it can (taking up the entire width of its parent container) by default.

Think of block-level elements as stacking boxes on top of each other. You cannot place two block elements side-by-side natively; the second one will always be forced underneath the first.

Common Block-level Elements:

<div> - The universal block container
<p> - Paragraphs
<h1> to <h6> - Headings
<form>, <ul>, <li>, <table>, <header>, <footer>

<div style="background-color: lightgreen;">
  I am a div element. I force my way onto a new line and steal the whole width!
</div>

I am a Block element - I take up 100% of this container's width.

Inline Elements

An inline element is much more polite. It does not start on a new line, and it only takes up exactly as much width as its content necessitates. You can place multiple inline elements next to each other, and they will flow together horizontally like words in a sentence.

Furthermore, inline elements generally ignore top and bottom margins or specific height/width declarations.

Common Inline Elements:

<span> - The universal inline container
<a> - Anchor links
<img> - Images
<strong>, <em>, <b>, <i>, <input>, <button>

<p>This is a standard paragraph. But <span style="background-color: yellow;">this span element</span> sits comfortably inside the text without breaking the line.</p>

This is a standard paragraph. But this span element sits comfortably inside the text without breaking the line.

Nesting Rules: You can place an inline element inside of a block element (like an image inside a paragraph). However, it is fundamentally invalid HTML to place a block element inside of an inline element (you cannot put an <h1> inside of a <span>).

The CSS Override

While HTML defines the native behavior as block or inline, CSS has the ultimate power to override it. Using the CSS display property, you can force a natural inline element to act like a block, or vice versa.

<!-- Making a link (inline by default) behave like a block-level button -->
<a href="#" style="display: block; width: 200px; background: blue; color: white;">
  I am a Block Link!
</a>

I am a Block Link!

« Previous Lesson Next Lesson »