이미지를 a태그로 감쌌을 때 여백이 생기는 이유

 

 

회사에서 마크업 작업을 하다가 아래와 같이 a태그 안에 이미지 태그를 넣으니 이미지 사이사이 여백이 생기는 현상이 생겼다.

해당 작업을 하면서 새롭게 알게 된 사실을 정리해본다!

 

<a href="#none">
  <img src="image.png" />
</a>
<a href="#none">
  <img src="image.png" />
</a>
<a href="#none">
  <img src="image.png" />
</a>

 

 

✅ 여백이 생기는 이유

1. 인라인 요소의 특성
<img> 태그는 기본적으로 인라인 요소.

인라인 요소는 텍스트와 같은 방식으로 취급되어 베이스라인(baseline)을 기준으로 정렬된다.

 

2. 베이스라인과 여백
인라인 요소는 베이스라인 위에 배치되며, 베이스라인 아래에는 소문자 g, p, y 등을 위한 여분의 공간이 존재한다.

이미지는 이 공간을 사용하지 않지만, 여전히 그 공간이 남아있어 여백으로 보이게 된다.

 

 

3. HTML 코드의 공백
여러 이미지를 나란히 배치할 때, HTML 코드에서 <img> 태그 사이의 줄바꿈이나 공백이 브라우저에 의해

실제 공백으로 해석되어 이미지 사이에 간격이 생길 수 있다.

 

 

✅ 해결방법

 

1. vertical-align 속성 사용하기 (⭐제일 추천하는 방법)

- 기본 속성인 베이스라인을 상단, 중앙, 하단 중 하나로 정렬시켜서 여백을 없애는 방법

img {
  vertical-align: bottom; /* top, middle도 가능 */
}

 

2. display 속성을 변경

- 기존 inline 속성을 block으로 바꾸는 방법

img {
  display: block;
}

 

 

3. 부모요소에 line-height 값을 0으로 설정하는 방법

- 단, 부모요소에 다른 자식 요소가 있을 때는 사용불가

div {
  line-height: 0;
}