Blocks stack, inline boxes share a line
The blue boxes reach the full width; the yellow ones are only as wide as their words. The script asks the browser for each element's default display.
Some elements stack on top of each other as full-width boxes (block), others sit inside a line of text like words (inline); knowing which is which, and what may go inside what, is the base of every layout.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Mark the price in <p>Only 499 rupees today</p> so it can be styled bold and green, without giving it extra meaning.
This HTML is invalid: <p>Steps:<ol><li>Mix</li><li>Bake</li></ol></p>. Rewrite it correctly.
Make a link Read more that takes the full width of its container and has 12px padding, without changing it into a different element.
Explain it without notes
What is the difference between a block-level element and an inline element? Give two examples of each.
Why does <p>Intro <div>box</div></p> produce two paragraphs in the DOM?
When should you use div and span, and when should you avoid them?
Why does width have no effect on a <span>, but does on an <img>?
Preview
Console
Nothing logged yet.Expected console output
p is block
p is block
p is block
strong is inline
em is inline
span is inline