Block elements stack on top of each other. Inline elements are placed side by side.
Table of contents
Web pages are like paper documents.
- Individual words are inline and placed side by side, from left to right (or right to left in some languages).
- Some words are combined into blocks (e.g. headings and paragraphs) that stack on top of each other, from top to bottom (or bottom to top in some obscure languages).
So, that's the two directions of CSS: block and inline.
And that's how
display: block and
display: inline work too:
- Block elements (
display: block) take the full available width by default so that they stack on top of each other. Think of e.g. headings, paragraphs and
- Inline elements (
display: inline) are placed side by side. Think of e.g. individual words and
Understanding the two directions is also essential for understanding logical properties in CSS.
when working with right-to-left (RTL) languages,
you might want to use
The latter properties would be in reverse or "wrong" order
when working with RTL languages.