Block-level and Inline Elements

Every element has a default display behavior that determines how it sits on the page in relation to the elements around it. Understanding this is the key to moving from "writing text" to "building layouts."

Block-level Elements

Block-level elements are the "bricks" of your webpage.

• They always start on a new line.
• They automatically stretch to fill the entire width of their parent container (100% width).
• They stack on top of each other like a tower of blocks.
• You can freely set the width, height, margin, and padding.

Common Block-level Tags:

• <div>
• <h1> through <h6>
• <p>
• <ul>, <ol>
• <li> — Technically has a display value of list-item rather than block, which is what generates the bullet point or number marker. It behaves like a block element in most respects, but you may see list-item when inspecting it in browser dev tools.
• <header>, <footer>, <section>

Inline Elements

Inline elements only take up exactly as much space as their content requires.

• They do not start on a new line. They sit side-by-side with other inline elements.
• You cannot manually set a width or height on an inline element. Their size is strictly determined by the content inside.
• You can add horizontal padding and margins, but vertical margins (top/bottom) will not push other elements away.

Common Inline Tags:

• <span>
• <a>
• <strong>, <em>

Inline-Block Elements

Some elements don't fit neatly into either category. <button> is a good example — it sits inline with surrounding content like an inline element, but it also respects width, height, and vertical margin/padding like a block element. This behavior is called inline-block. You will encounter it when styling form elements and interactive controls.

Comparison