[멋사 프론트엔드 부트캠프 14기] SVG 넣었는데 아래에 이상한 여백이 생긴다...?

이번에는 검색바를 만드는 실습으로 flex 연습을 했다.

 

실습을 진행하다보니 뭔가 로고의 높이가 이상해보여서 개발자도구로 확인해봤더니 아래의 사진과 같았다.

<a href="https://www.naver.com/" title="홈으로 이동">
	<figure>
		<svg aria-labelledby="logo" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H8L15.5 12V0H24V24H15.1875L8 12.5L8 24H0V0Z" fill="url(#paint0_linear_2294_3)" />
            <defs>
             	<linearGradient id="paint0_linear_2294_3" x1="4.5" y1="-1.93715e-07" x2="20.5" y2="24" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#1BF008" />
					<stop offset="1" stop-color="#03CCA8" />
				</linearGradient>
			</defs>
		</svg>
		<figcaption id="logo" class="sr-only">네이버</figcaption>
    </figure>
</a>

 

SVG 크기는 24px인데, 실제로 여백이 생겨서 27px처럼 보인다??

 

분명 svg의 크기는 24px*24px이니까 svg과 위 코드처럼 figure로 감싸져있어도 svg의 크기대로 나올 줄 알았는데 아니었다ㅠ

 

 

📝 원인

처음엔 “margin이나 padding 때문인가?” “figcaption 때문인가?” 생각했지만,
진짜 이유는 SVG가 인라인 요소이기 때문이었다 :(

그래서 텍스트처럼 baseline 정렬을 하게 되는데, 이는 글자 아래쪽 선 기준으로 정렬하는 방식이라서, SVG 아래에 불필요한 여백이 생기게 된다..

이건 svg에만 해당되는 것은 아니고, img, span, inline svg, button, a 처럼 인라인 요소인 것에는 불필요한 여백이 생길 수 있다.

 

 

📝 해결 방법 3가지

1. display: block; ← 가장 심플

• baseline 정렬에서 빠져나와 여백 제거
• 내부 콘텐츠만큼만 정확히 높이 차지
• 텍스트 요소 아니면 대부분 block이 안전함

 

2. display: flex;

• figure 안의 요소를 수직 정렬하고, 내부 콘텐츠 기준으로 크기 정리
• 다양한 UI 컴포넌트에 잘 어울림

3. height를 직접 지정 ⚠️

• 당장의 문제는 해결되지만, 유연성이 떨어질 수 있음
• SVG 크기 바뀌면 수동으로 계속 수정해야 함

 

방법	유연성	설명
display: block	높음 ↑	간단하고 안전함
display: flex	높음 ↑	수직 정렬까지 필요할 때
height 고정	낮음 ↓	유지보수 불리함