HTML · CSS로 코딩 할 때 img 요소 아래에 수수께끼의 여백이 나오는 것은 없습니까?

이것은 img 요소에 vertical-align: middle;를 설정하면 해결됩니다.

하지만

원래 왜 이런 현상이 일어나고 있는가

왜 이것으로 해결할까

에 대해 이해하고 있는 분은 적은 것이 아닐까요.
이 기사에서는 그 주변에 대해 설명합니다.

img 요소 아래에 여백이 있다는 것은 무엇입니까?

예를 들어 div 요소 안에 img 요소를 넣는 HTML이 있다고 가정합니다. (실제 코드는 여기)

HTML

<div class="outer-box">
  <img src="https://drive.google.com/uc?export=view&id=1LJA0-Kgs6oqGkt-M5magSgspj6SpSPM2">
</div>

이것을 보면 다음과 같습니다. (편의를 위해 outer-box 배경을 빨간색으로 만듭니다)



↑이미지의 아래 부분에 수수께끼의 여백(붉은 선)이 되어 있군요. .

왜 이렇게 되는 거야?

왜 이렇게 되어 있는가 하면, 2개의 포인트가 있습니다.

img 요소는 인라인 요소입니다

인라인 요소는 기본적으로 vertical-align: baseline;로 설정됩니다

vertical-align: baseline;를 설정하면 이미지의 경우 기준선에 이미지가 올라간 모양이 됩니다.



하지만 왜 Baseline에서 정렬하지 않고 아래에 여백을 할 수 있습니까?

여기서 중요한 것은 font-size 와 line-height 입니다.

인라인 요소의 font-size와 line-height의 관계

인라인 요소에서 font-size 와 line-height 는 다음과 같은 느낌으로 되어 있습니다.



문자 그대로, font-size 는 문자의 크기, line-height 는 행간을 가리키고 있습니다.

그렇다면 vertical-align의 값을 바꾸면 각각 어떻게 될까요?
1 개씩 봅시다.

vertical-align이 top인 경우

top의 경우, 이미지의 세로 폭이 line-height보다 커지면, 아래로 요소가 확장됩니다.

즉, 이미지에 여백이 생길 여지가 없습니다.

bottom이나 middle의 경우에도 같은 생각이 됩니다.

vertical-align이 bottom인 경우

bottom의 경우, 이미지의 세로 폭이 line-height보다 커지면 위로 요소가 확장됩니다.

이쪽도, 이미지에 여백을 할 수 있는 여지가 없네요.

vertical-align이 middle이면

이미지의 세로 폭이 line-height보다 커지면 요소가 위아래로 균등하게 확장됩니다.

이쪽도, 이미지에 여백을 할 수 있는 여지가 없을 것입니다.

vertical-align이 baseline이면

baseline이면 이미지의 세로 폭이 line-height보다 커지면 위로 확장되지만 아래로는 확장되지 않습니다.
(baseline 위에 탑승하고 있기 때문에)

이렇게 되면 베이스라인의 아래쪽은 자연스럽게 비어있지요.
그래서 이미지 아래에 여백이 생겨 버립니다.

예를 들어, 블록 위에 사진을 올려 놓은 것 같습니다.

🧑 : "vertical-align을 top이나 middle로 만들면 여백이 사라졌습니다. 왜?"
라고 생각하는 분도 많이 계신다고 생각합니다만,

개인적으로는 이것은 오히려 반대로, "baseline을 설정하면 여백을 할 수 있다"쪽이 적절하다고 생각합니다.

그게 비유라면 baseline이라는 블록 담 위에 사진을 올리고있는 것일까요 (웃음



블록 위에 실려있는 한 블록은 없어지지 않으므로 여백이 생겨 버린다고 이해하면 어떻습니까 (전해지고 있으면 기쁩니다 💦)

참고

이해하고 싶은 CSS에 의한 인라인 레이아웃의 구조(font-size/line-height편) Inline Layout─Frontrend Conference

이해하고 싶은 CSS에 의한 인라인 레이아웃의 구조(vertical-align편 2)

vertical-align - 스타일 시트 참조