vertical-align

Vertical-align 이란?

먼저, Vertical-align은 인라인 블록 등을 포함한 모든 인라인요소의 수직 정렬을 위해 사용됩니다. 하지만 블록 레벨 요소의 수직 정렬에는 영향을 미치지 않는데요, 여기서 table-cell*의 수직 정렬은 예외라는 점! 아래는 vertical-align관련해 스펙에서 발췌한 내용입니다.

Vertical-align 관련 개념들

Strut

Strut는 부모 요소의 font-size와 line-height 속성을 상속 받은 width가 0인 가상의 박스라고 볼 수 있는데요. 즉, 이 보이지 않지만 존재하는(!) 상상의 박스의 baseline에 따라 부모 요소 안의 인라인 요소가 수직 정렬됩니다. 이 상상의 박스의 위치를 눈으로 확인하고 싶다면 방법이 있습니다. 부모 요소에서 어떠한 태그도 감싸지 않고 바로 기입된 텍스트를 익명 텍스트라고도 부르는데요. 이 텍스트 영역이 strut와도 같다고 볼 수 있습니다.

익명 텍스트 (anonymous text)

익명텍스트(anonymous text)는 인라인 요소 안에 포함되지 않은 텍스트를 의미합니다. 예를들어 다음의 마크업에서 ‘이불 밖은’은 anonymous text에 해당합니다.

Line-height

ine-height값은 텍스트 위쪽에 있는 행 사이의 공간인 행간(leading)과 폰트의 크기를 통제하는 것으로 line-height에서 font-size를 뺀 값을 2로 나누어 각 글자의 위와 아래에 더해집니다. 요약하면 아래와 같습니다.
(line-height – font-size) / 2 = 반-행간(half-leading) 값

대체된 요소 (replaced element)

해당 요소는 주로 고유의 크기(dimension), 즉 각 UA(사용자에이전트)에서 정의하는 고유의 넓이, 높이, 비율 등을 가지고 있습니다. 또, 각 UA에 따라 baseline이 다르게 정의 됩니다.
대체된 요소: img, object, video, button, input, textarea, select 등 대체된 요소의 콘텐츠 영역은 요소의 높이에 패딩, 마진, 보더를 더한 영역 (즉, 스펙에서 말하는 ‘마진 박스’) 입니다.
인라인 박스 높이는 콘텐츠 영역 높이와 같습니다.
(line-height – font-size) / 2 = 반-행간(half-leading) 값

대체되지 않은 요소 (non-replaced element)

대체된 요소를 제외 한 모든 요소를 뜻합니다. (div, p, span, em 등)
대체되지 않은 인라인 요소: span, em, strong 등
대체되지 않은 인라인 요소의 콘텐츠 영역은 font-size의 크기 또는 사용자 에이전트에 따라 문자 도안들로 만들어지는 박스를 의미합니다.
대체되지 않은 인라인 요소의 인라인 박스 높이는 콘텐츠 영역에 행간(leading)이 추가된 높이를 말합니다. (패딩, 마진, 보더 값은 고려되지 않음)
(line-height – font-size) / 2 = 반-행간(half-leading) 값

인라인 박스 (inline box)

인라인 박스(inline box)는 라인 박스 안에서 vertical-align 속성 값에 의해 수직 정렬되는 영역입니다.

라인 박스 (line box)

라인 박스는 여러 인라인 박스를 구성하는 영역으로 하나의 줄에 있는 인라인 박스의 가장 높은 지점과 낮은 지점을 둘러싸고 있는 박스입니다. 아래는 스펙에서 발췌한 내용입니다.

Vertical-align 속성값