Block & Inline Elements
Why some elements stack on new lines and others sit side by side — a concept you will use forever.
What you will learn
- Tell block and inline elements apart
- Predict how elements will lay out
- Know the common elements in each group
Two behaviours
Every element is either block-level or inline.
- Block elements start on a new line and take the full width available. Examples:
<div>,<p>,<h1>,<ul>,<section>. - Inline elements sit within a line and take only as much width as their content. Examples:
<span>,<a>,<strong>,<img>.
<div style="background:#e0e7ff">Block 1 — I take the full width</div>
<div style="background:#c7d2fe">Block 2 — I start on a new line</div>
<p>
Inline elements like
<span style="background:#fde68a">this span</span> and
<span style="background:#fca5a5">this one</span>
flow along the same line.
</p>The two <div> blocks each grab a full line and stack on top of each other — notice their coloured backgrounds stretch all the way across. The two <span> elements inside the paragraph only colour the words they wrap and stay in the flow of the sentence, side by side. That is the whole block-versus-inline difference, made visible with background colours.
Note: Output: Two full-width coloured bars stacked vertically (the divs). Below them, a sentence where “this span” and “this one” are highlighted but sit inline within the same line.
Tip: This is the foundation of all page layout. When you reach CSS, you will change these behaviours with display, Flexbox and Grid — but the block/inline idea stays.
Q. Which of these is an INLINE element?
✍️ Practice
- Put three
<div>elements one after another and observe they stack vertically. - Put three
<span>elements together and observe they sit on one line.
🏠 Homework
- List five block elements and five inline elements from memory.