Physical vs logical in an RTL card
In RTL, the line starts on the right, so the "end" corner is on the left. right: 8px ignores direction; inset-inline-end follows it. The script measures where each badge really sits.
Logical properties describe sides by the direction of the text instead of the screen: margin-inline-start means "where lines begin", which is the left in English and the right in Arabic or Hebrew, so one stylesheet works in every language and writing mode.
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.
Convert this to logical properties: .note { margin-left: auto; margin-right: auto; padding-top: 1rem; padding-bottom: 1rem; border-left: 3px solid gold; width: 30rem; }.
Place a close button in the top corner at the end of the line of a dialog, so it's top-right in English and top-left in Arabic.
Make an <ul> of chat messages where each message bubble has a 2rem margin on the end side and aligns to the start, in any direction.
Explain it without notes
What are logical properties, and why were they added to CSS?
Explain the inline and block axes, and their start and end, for English, Arabic and vertical Japanese.
How should you set text direction on a page, and why not with CSS direction?
When would you still use a physical property?
Preview
Console
Nothing logged yet.Expected console output
physical: badge on the right | line starts on the right
logical: badge on the left | line starts on the right