이른바 vertical-align

vartical al-align 속성은 요소의 세로 배열 기준을 지정할 수 있습니다.
이 속성은 인라인 요소에만 유효합니다.
"vertical-align이 지정한 요소 중 어느 것을 부모 요소 중 어느 것과 일치시킬까요?"

리스트

옵션
설명
baseline
모 요소의 베이스라인 정렬
middle
객체 요소와 부모 요소의 중심선을 부모 요소에 정렬
text-top
객체 요소와 부모 요소의 맨 위 선을 부모 요소 문자의 맨 위에 정렬합니다.
text-bottom
객체 요소와 부모 요소의 아래쪽 선을 부모 요소 문자의 아래쪽에 정렬합니다.
top
객체 요소 행의 맨 위 행을 부모 요소 행의 맨 위에 정렬합니다.
bottom
대상 요소 행의 아래쪽 선과 부모 요소 행의 아래쪽 선을 정렬합니다.
숫자+단위
대상 요소의 기선과 부요소의 기선을 일정한 거리를 유지하는 위치를 맞추다
%
대상 요소의 line-height 높이를 100%로 설정하고 대상 요소의 기선과 부모 요소의 기선을 지정한 비례의 거리를 유지합니다

이른바 선

a.html

   <div>
       hoge
       <span>huga</span>
   </div>

요소의 기준이 되는 선이 있어요.

예제

style.css

span{
 vertical-align: text-top;
}

이렇게 하면

hoge(부요소)의text-top선과huga(대상의 내연요소)의text-top선이 일치