Python Block vs Inline Elements
Every HTML element has a default display behavior: it is either a Block element (takes up the entire width of the screen, pushing everything below it) or an Inline element (takes only the space its text needs, sitting happily next to neighbors).
"Block elements are like heavy shipping containers—you cannot put two side-by-side without a giant crane; they stack on top of each other. Inline elements are like words in a sentence—they flow side-by-side until they run out of room at the edge of the page."
Deep Dive: How It Works
Block Elements: <div>, <h1>-<h6>, <p>, <ul>, <ol>, <li>, <section>, <header>, <form>. They always start on a new line and stretch 100% full width.
Inline Elements: <span>, <a>, <strong>, <em>, <code>, <button>, <input>, <label>. They do NOT start on a new line and only take as much width as necessary.
Nesting Rule: Block elements can contain inline and other block elements. Inline elements should NEVER wrap block elements.
Syntax Blueprint
<!-- Block: Stacks vertically --> <div>Block 1</div> <div>Block 2</div> <!-- Inline: Sits side-by-side --> <span>Inline 1</span> <span>Inline 2</span>
Block elements claim full horizontal space; inline elements wrap tightly around text.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Putting a block element inside an inline elementWhy it happens: Wrapping a <div> or <h1> inside an <em> tag.
How to fix: Always wrap inline elements inside block containers, not the other way around.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Create block and inline elements
- Create a <div> with text "Block Container"
- Inside or below it, create a <span> with text "Inline Word"
Finished reading and practicing?
Mark this lesson as completed to update your course progress.