Block display
Block elements take the **whole** line and respect any width and height you set. Each new block starts on its own line. [file:2]
Block ticket A
Block ticket B
Block ticket C
Block ticket D
.ticket--block { display: block; width: 260px; height: 60px; }
Inline display
Inline elements sit **next** to each other on the same line while there is space and ignore width and height values. [file:2]
Inline ticket 1
Inline ticket 2 (resize me)
Inline ticket 3
Inline ticket 4
.ticket--inline { display: inline; /* width/height not applied */ }
Inline-block display
Inline‑block combines both: items line up **horizontally** when there is room, but they still honor their width and height. [file:2]
Inline-block A
Inline-block B
Inline-block C
Inline-block D
.ticket--inline-block { display: inline-block; width: 260px; height: 60px; }