By aPOST in CSS — 2023년 12월 23일

[CSS] 블록 태그 안의 이미지 밑에 여백이 남는 이유

CSS를 처음 다루기 시작할 때 가장 많이 부딛히는 문제이며, 문제의 원인에 대한 이해가 없이 요행으로 문제가 해결되고 넘어가면서 같은 문제가 반복됩니다.

다음과 같이 이미지가 들어있는 단순한 블록 태그를 웹 페이지에 표시하면

<div class="layout">
    <img src="./backup/872/img/cat.jpg">
</div>

하단에 다음처럼 여백이 남게 됩니다.

일단 이유를 모르고 이런 저런 속성을 추가하다보면 여백이 사라지고, 다음 번에 같은 문제가 또 생길 때 까지는 잊혀지게 됩니다.

원인을 먼저 설명합니다.

인라인(inline) 속성으로 표시되는 텍스트, 또는 이미지 컨텐츠는 컨텐츠 들이 정렬되는 기준 선이 있습니다.

인라인 요소의 기본 설정 기준선 값은 베이스라인(baseline) 입니다.

베이스라인은 다음처럼 텍스트를 표시할 때 문자(알파벳 기준)가 얹혀지는 기준 바닥(baseline)을 말합니다. 그리고 알파벳 문화권에서 이 베이스라인은 위아 아래에 모두 공간을 가지게 됩니다.

영문 소문자 중 g, j, p, q 와 같은 문자들은 베이스라인 밑으로 문자가 내려가 걸쳐집니다.

이미지 또한 기본 "display" 속성으로 인라인 속성을 가지게 되고, 베이스라인 기준선에 걸치게 됩니다.

베이스라인 밑의 텍스트 문자를 표현하기 위한 공간은 그래서 발생하게 됩니다.

텍스트와 이미지가 인라인으로 함께 배치되면 다음처럼 명확하게 원인을 알 수 있습니다.

해결 방법은 여러가지가 있습니다.

텍스트와 함께 배치되는 경우가 아니면 이미지에 "display: block;" 속성을 부여하면 베이스라인이 적용되지 않기 때문에 밑에 남아있던 여백은 사라집니다.

텍스트와 이미지가 인라인으로 함께 배치된 경우에는 "display: block;" 속성을 사용할 수 없습니다.

이런 경우 인라인 정렬 기준을 "baseline" 에서 다른 것으로 변경하는 것입니다. "baseline" 만 아니면 하단에 여백이 남는 현상은 발생하지 않습니다.

행 높이("line-height") 가 없으면 베이스라인은 부모 요소의 테두리 영역과 겹쳐지게 되면서 텍스트가 부모 요소의 테두리에 걸치게 됩니다. 베이라라인이 블록 테두리와 겹치므로 이미지는 블록 끝 부분까지 자리를 차지하게 됩니다.