inline-block 상자

개념 이해하기

inline-block은 인라인처럼 한 줄에 배치되지만 block처럼 width, height, 상하 padding을 적용할 수 있습니다. 소스의 공백이 요소 사이 간격으로 보일 수 있습니다.

inline-block이 된 두 상자는 같은 줄에 나란히 서면서도 width: 130px와 사방 18px padding을 그대로 받습니다. 둘 사이 간격은 .second의 margin-left 8px에 HTML 줄바꿈이 만든 공백 한 칸이 더해진 값이라 8px보다 조금 넓습니다. 지금은 두 상자의 글이 모두 한 줄이라 위아래가 맞지만, 한쪽 글이 두 줄로 늘어나면 기본값인 기준선 정렬 때문에 상자 위치가 어긋납니다.

inline-block 상자나 이미지 아래에 생기는 몇 픽셀의 빈틈도 같은 기준선 정렬에서 나옵니다. 상자가 글자의 기준선 위에 앉으면 그 아래로 g나 y의 꼬리가 들어갈 자리가 남기 때문이며, vertical-align을 top이나 middle로 바꾸면 이 틈이 사라집니다.