(HTML/CSS) Vertical-Align(1) - Line Box

"왜 되는지 모르겠다" 는 말이 자주 나오는 CSS `vertical-align` 을 표준 명세부터 짚어 설명하는 1편이다. `top`/`bottom` 이 무엇을 기준으로 정렬하는지 이해하려면 line box 의 높이가 어떻게 결정되는지를 먼저 알아야 한다는 순서로 전개한다.

핵심 포인트

좌우 정렬은 inline 이면 `text-align: center`, block 이면 `margin: auto` 로 답이 나오지만 수직 정렬은 답이 제각각이라는 문제의식에서 출발한다.
`vertical-align: top` 은 line box 의 최상단에, `bottom` 은 최하단에 정렬한다. 그래서 line box 의 크기를 알아야 결과를 예측할 수 있다.
line box 의 높이는 우선 그 줄에 있는 inline-level 요소들의 높이 중 가장 큰 값으로 정해진다.
여기에 더해 `strut` 라는 가상의 박스가 있다. width 가 0 이라 레이아웃에는 영향을 주지 않지만, 부모 block 요소의 font·line-height 를 상속받아 line box 높이에 관여한다.
그래서 `line-height` 를 키우면 line box 가 커지지만, `height` 를 키우는 것은 line box 에 아무 영향이 없다.

상세 정리

inline-level 요소의 정의: 한 줄에 나열할 수 있는 요소들로 `display` 를 inline, inline-block, inline-table 등으로 지정해 만든다.
이 요소들이 만드는 가상의 박스가 곧 해당 요소의 크기이며, 그 박스들을 담고 있는 것이 line box 다.
inline 은 inline-block 과 달리 width/height 가 아니라 폰트 메트릭에 따른 계산이 필요하다고 미리 선을 긋고 다음 편으로 미룬다.
실험 ①: 높이 300px 박스 하나와 100px 박스 두 개를 두고 작은 박스에 각각 top 과 bottom 을 준다. 가장 큰 300px 박스를 기준으로 최상단·최하단에 배치된다.
큰 박스에도 top 을 줬지만 line box 와 높이가 같아 위치 변화가 없다는 점을 함께 짚는다.
실험 ②: 200px 박스를 추가해도 최대 높이가 여전히 300px 이므로 기준은 바뀌지 않는다.
strut 계산 예: `line-height: 100px` 인 block 요소는 100px 짜리 strut 를, `font-size: 15px` 에 `line-height: 5` 면 75px 짜리 strut 를 만든다.
실험 ③: `line-height: 300px` 은 기존과 같아 변화가 없지만, 400px 로 올리면 line box 가 400px 로 늘어나 정렬 위치가 달라진다.
실험 ④: 같은 400px 이라도 `height` 로 주면 line box 는 300px 그대로다. height 는 line box 계산에 들어가지 않는다.