이미지 주변에 생기는 불필요한 공백 제거하기

웹에서 이미지 아래나 옆에 의도치 않게 공백이 생겨서 애를 먹는 경우가 있는데요. 이번 포스팅에서는 언제 이렇게 이미지 주변에 불필요한 공백이 생길 수 있으며, 이러한 성가신 공백을 효과적으로 제거하는 다양한 요령을 알려드리겠습니다.

이미지 아래에 생기는 공백

<div>나 <figure>와 같은 HTML 요소 안에 이미지를 담고 있는 <img> 요소를 넣어보겠습니다.

<div>
  <img src="https://via.placeholder.com/200" alt="placeholder" />
</div>

이미지 아래에 살짝 공백이 생긴 것이 보이시나요? 🤨

이미지 아래에 이러한 공백이 생기는 이유는 <img> 요소의 display 속성이 기본적으로 inline이기 때문인데요. 다시 말해서, HTML에서 <img> 요소에 담긴 이미지는 <span>이나 <strong> 요소에 담긴 텍스트처럼 좌우로 나란히 배치되게 되어 있습니다.

이러한 인라인(inline) 요소는 좌우로 배치되었을 때 상하 정렬을 맞추기 위해서 보이지 않는 가상의 가로선이 존재하는데요. 이것을 보통 베이스라인(baseline)이라고도 하죠. 기본적으로 이미지든 텍스트든 인라인 요소에 들어있는 내용은 이 베이스라인 바로 위에 딱 달라 붙게됩니다.

여기서 문제는 웹의 기본 언어는 좋은 싫든 영어이고, 영어는 알파벳으로 되어 있으며 베이스라인 아래까지 내려갈 수 있는 소문자 알파벳(ex. g, p, y) 때문에 베이스라인 아래에 여분의 공간이 있다는 것이죠.

하지만 이미지의 경우, 항상 대문자 알파벳처럼 취급뒤어 어쩔 수 없이 베이스라인 아래가 항상 비어있게 되며, 바로 이것이 의도치 않는 공백의 원인이 됩니다.

이러한 공백은 없애고 싶다면 가장 쉽게 생각할 수 있는 방법이 vertical-align 속성을 사용해서 상하 정렬 기준을 베이스라인(baseline)에서 요소의 하단(bottom) 또는 상단(top) 변경하는 것입니다.

img {
  vertical-align: bottom;
  /*   vertical-align: top; */
}

이렇게 해주면 이미지가 <img> 요소의 하단이나 상단에 달라붙라 붙으면서 자연스럽게 베이스라인을 기준으로 정렬될 때 발생하던 소문자를 위한 여분의 공간이 사라지게 됩니다.

두 번째로 생각할 수 있는 방법은 이 문제는 <img>가 기본적으로 인라인 요소라서 발생하는 것이니 display 속성을 block으로 지정하여 아예 블락(block) 요소로 바꿔버리는 것입니다.

img {
  display: block;
}

단, 이렇게 <img>가 블락 요소가 되면 이미지가 여러 개일 때 더 이상 좌우로 배치되지 않고 상하로 배치되니 주의가 필요하겠습니다.

만약에 어떤 이유로든 <img> 요소를 직접 스타일할 수 없는 상황이라면 어떻게 해야할까요? 이럴 때는 <img> 요소를 담고 있는 부모 요소의 line-height를 0으로 줄여버릴 수 있습니다.

div {
  line-height: 0;
}

line-height 속성은 각 줄의 높이를 지정하며 글꼴 크기(font-size)에 비례하는데 0이 되면 논리적으로 아무리 글꼴 크기가 크더라도 줄높이가 0이 되어 버립니다.

line-height를 포함한 텍스트 스타일링에 사용되는 대표적인 CSS 속성에 대해서는 별도 포스팅에 정리해놓았으니 참고 바랍니다.

이미지 옆에 생기는 공백

이번에는 이미지 여러 개를 한 줄에 배치했을 때 어떤 일이 일어나는지 볼까요?

<div>
  <img src="https://via.placeholder.com/200" alt="placeholder" />
  <img src="https://via.placeholder.com/200" alt="placeholder" />
  <img src="https://via.placeholder.com/200" alt="placeholder" />
</div>

이미지 사이에 뜻하지 않게 약간의 공백이 생기는 것을 볼 수 있는데요. 🫣

이렇게 이미지 사이의 원치 않는 공백은 HTML 코드 상에서 <img> 요소 간에 띄어쓰기나 줄바꿈이 공백으로 취급이 되기 때문에 발생합니다. HTML에서 텍스트를 사용할 때 단어 사이의 띄어쓰기나 문단의 마지막에 줄바꿈이 공백으로 표시되는 것과 같은 이치이죠.

따라서 이 문제를 해결하기 위한 가장 쉬운 방법은 <img> 요소를 줄바꿈하지 않고 앞뒤로 딱 붙여서 작성하는 것입니다.

<div>
  <img src="https://via.placeholder.com/100" alt="placeholder" /><img
    src="https://via.placeholder.com/100"
    alt="placeholder"
  /><img src="https://via.placeholder.com/100" alt="placeholder" />
</div>

하지만 이렇게 하면 보시다시피 해당 HTML 코드가 읽기 어려워진다는 단점이 있습니다.

또 다른 궁여지책으로 CSS의 letter-spacing 속성으로 음수값을 사용해서 이미지 간의 간격을 최대한 줄일 수도 있는데요.

div {
  letter-spacing: -5px;
}

하지만 약간의 틈이 생기거나 이미지가 겹치는 문제가 발생할 수 있기 때문에 권장되지 않습니다.

플렉스박스(Flexbox)로 해결

이렇게 이미지 주변에서 발생할 수 있는 골치아픈 공백을 애초에 생기지 않도록 예방할 수는 없을까요? 다행히도 매우 좋은 방법이 있는데요. 바로 CSS의 플렉스박스(Flexbox) 안에 <img> 요소를 넣는 것입니다.

<img> 요소를 담고 있는 <div> 요소의 display 속성을 flex로 바꿔주는 순간 이미지 아래와 옆에 있던 공백이 모두 싹 날라가는 것을 볼 수 있으실 겁니다. 😇

div {
  display: flex;
}

다른 인라인 요소에 적용

사실 이렇게 뜻하지 않게 생기는 공백은 비단 <img> 요소 뿐만 아니라, <svg>, <canvas>, <video>와 같이 이미지나 비디오를 보여줄 때 사용하는 다른 인라인 요소에서도 흔하게 발생할 수 있습니다.

예를 들어, <div> 요소 안에 SVG 아이콘 여러 개를 나열하면 다음과 같이 주변에 뜻하지 않게 공백이 생기는데요. 마찬가지로 플렉스박스를 사용해서 어렵지 않게 공백을 제거할 수 있습니다.

SVG 태그를 통해서 SVG에 연관된 포스팅을 쉽게 만나보세요!

마치면서

이상으로 텍스트를 담지 않는 인라인 요소에서 흔히 발생할 수 있는 불필요한 공백을 어떻게 제거할 수 있는지 알아보았습니다. 앞으로 웹 개발을 하시다가 이렇게 뜻하지 않게 생긴 공백 때문에 곤혼스러운 일이 없으셨으면 좋겠습니다.