Writing modes and logical properties
The same inline-size: 160px makes the first box 160 + 12 + 6 = 178px wide, but the vertical box 178px tall: in vertical-rl, the inline axis points down and inline-start is the top edge. In the dir="rtl" paragraph, every inline-start property lands on the right.
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
horizontal: 178 x 48
vertical: 48 x 178
vertical border-top: 6px
rtl margin-left: 0px margin-right: 24px
rtl border-right: 4px