텍스트 흐름에 놓이면서 너비와 높이를 갖는 상자를 만듭니다.
inline-block은 인라인처럼 한 줄에 배치되지만 block처럼 width, height, 상하 padding을 적용할 수 있습니다. 소스의 공백이 요소 사이 간격으로 보일 수 있습니다.
이번 예제의 출발점은 display: inline-block;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 두 요소의 vertical-align을 top과 middle로 비교하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
복잡한 정렬과 유연한 간격에는 inline-block보다 Flexbox가 더 예측하기 쉽습니다.
직접 바꿔보세요두 요소의 vertical-align을 top과 middle로 비교하세요.