8: Display, Flow & Why Inline Feels Broken

block / inline / inline-block / none

display	Line break?	Respects width/height?	Typical
`block`	Yes, starts a new line, full width	Yes	`div`, `p`, `h1`, `section`
`inline`	No, flows with text	No (width/height ignored)	`span`, `a`, `em`
`inline-block`	No	Yes, a hybrid	Button-like spans
`none`	Removed entirely	Not applicable	Hidden

block: each takes its own line

block

inline: width is ignored

Text span width:120px? nope continues.

inline-block: width works

Text inline-block 120px continues.

span { width: 120px; }              /* does nothing, inline ignores width */
span { display: inline-block; width: 120px; } /* now it works */

Gotcha: margin-top and margin-bottom also do nothing on inline elements. If vertical spacing isn't working, check whether the element is inline.

Quick preview: flex and grid are just display values

display: flex and display: grid switch the children's layout mode. You don't need to master them yet, just recognize them.

display: flex

onetwothree

display: grid (2 cols)

onetwothreefour

Deep dives are in Modules 9 and 10.

Hiding things: none vs. hidden vs. opacity

display: none
Gone. No space. Screen readers skip it.

visibility: hidden
Invisible, but space remains

opacity: 0
Invisible, space remains, still clickable

Above, the middle box uses visibility:hidden, the right one uses opacity:0. Try selecting or clicking them: the opacity one still responds.

display: none
(removed from layout)

visibility: hidden
hidden box(invisible, keeps space)

opacity: 0
hidden box(transparent, still there)

.hidden-layout { display: none; }       /* removed, use for toggling */
.hidden-visual { visibility: hidden; }  /* keeps layout gap */
.transparent   { opacity: 0; }          /* for fades and transitions */

Live demo: horizontal nav three ways

Same links, different display.

inline-block nav (older approach, watch the 4px gap)

flex nav (modern, no gaps)

Gotcha: inline-block leaves 4px gaps caused by whitespace and newlines in the HTML. Flex with gap doesn't have that problem, which is a big reason flex replaced inline-block navs.

Exercise: Build a nav each way (15 min)

Create a <nav> with 4 links.
Version A: a { display: inline-block; }, notice the gaps.
Version B: nav { display: flex; gap: 8px; }, clean.
Version C: hide one link with each hiding method and compare the layout.

Prev7: How to Actually Center a Div Next9: Flexbox