Blocks stack and fill the width; inline boxes ignore width
A starts 10px down (2px border + 8px padding); B starts 36px + 8px margin later. Block A is 260px wide although its text is short. The spans' width is ignored: getComputedStyle still reports the 200px you wrote, but the real rendered box (offsetWidth) is only as wide as its word.
With no layout CSS, the browser places boxes in normal flow: block boxes stack one under another and fill the width, while inline content runs along lines and wraps; writing modes and logical properties decide which way "down" and "along" really point.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a <span class="pill"> 100px wide and 28px tall while it still sits inside the line of text.
Write a .callout rule with a 4px solid orange bar at the start of its lines, 12px of padding at the start, and 16px of margin above and below, all with logical properties.
Make a <div class="spine">Volume 1</div> that shows its text running top to bottom, like a book spine, 40px wide and 160px tall.
Explain it without notes
What is normal flow, and how do block and inline boxes behave in it?
Why do width and height have no effect on a <span>?
Which boxes are taken out of normal flow, and what happens to their siblings?
What are the inline and block axes, and why do logical properties exist?
Preview
Console
Nothing logged yet.Expected console output
A top: 10 B top: 54
A width: 260
span display: inline
span computed width: 200px
really 200px wide? false