> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# 인라인 SVG 아래 빈틈 없애기: CSS 줄 상자와 도안 여백 구분

> SVG 아래 공간이 HTML 줄 상자에 있는지 도안 내부에 있는지 찾은 뒤 블록 표시나 인라인 정렬을 선택하고 실제 결과를 확인하세요.

Source: https://perfectvector.com/ko/blog/inline-svg-baseline-gap

Language: ko
Author: Irene Kim
Published: 2026-10-22T08:00:00+09:00

SVG 아래의 좁은 틈은 SVG가 들어 있는 HTML 줄에서 생길 수 있습니다. 인라인 그래픽은 텍스트 배치에 참여하므로 기준선과 줄 높이가 상자 아래 공간을 남길 수 있습니다. 독립 이미지라면 `display: block`을 시험하세요. 글자 옆에 있어야 하는 그래픽이라면 인라인 정렬을 의도적으로 선택합니다.

먼저 틈의 위치를 찾으세요. **SVG 요소 상자 바깥**의 공간은 페이지 레이아웃을 검사해야 합니다. **상자 안쪽**의 공간은 SVG 캔버스나 맞춤 규칙에서 생길 수 있습니다. 로고를 다시 추적해도 첫 번째 문제는 고쳐지지 않습니다. 이 안내는 둘을 구분하고 작고 국소적인 CSS 수정을 검증하는 방법을 설명합니다.

## 어느 상자에 공간이 있는지 찾으세요

브라우저 개발자 도구에서 SVG와 바로 감싸는 래퍼에 대비되는 배경을 지정하세요. 요소 외곽선도 검사합니다. 배경은 임시 진단 도구이며 전달 도안에 넣을 필요가 없습니다.

```css
.logo-wrap {
  background: peachpuff;
}

.logo-wrap > svg {
  background: lightgreen;
}
```

초록 SVG 상자 아래로 복숭아색이 이어지면 래퍼의 줄 레이아웃, 패딩, 테두리, 높이, 이웃 요소를 검사하세요. 보이는 그림 아래로 초록색이 이어지면 도안의 `viewBox`, 그리기 경계, 뷰포트에 맞춰지는 방식을 검사합니다.

둘이 함께 생길 수도 있습니다. 줄 상자를 고쳐 얇은 띠가 사라져도 이미지 내부의 더 큰 투명 여백은 남을 수 있습니다. [SVG 맞춤 안내](https://perfectvector.com/ko/blog/svg-preserveaspectratio)는 원본 사각형과 대상 뷰포트의 상호작용을 설명합니다. 원치 않는 공간이 내부에 있는지 알기 전에는 `viewBox`를 조이지 마세요.

삽입 방법도 중요합니다. 인라인 `<svg>`는 HTML 문서의 일부이고 `<img src="logo.svg">`는 외부 이미지를 불러옵니다. [인라인 SVG와 이미지 안내](https://perfectvector.com/ko/blog/inline-svg-vs-img)에서 설명하듯 스타일 경계가 다릅니다. 모든 SVG 파일을 같은 방식으로 삽입한다고 가정하지 말고 HTML 행에 실제 놓인 요소를 검사하세요.

## 기준선 아래에 공간이 남는 이유

텍스트 줄에는 `g`, `p`처럼 기준선 아래로 내려오는 글자를 위한 공간이 필요합니다. 인라인 그래픽이 기준선에 맞춰져 있어도 이를 포함한 줄은 아래로 더 이어질 수 있습니다. 그래서 이미지 여백을 0으로 설정해도 달라지지 않을 수 있습니다.

[CSS 줄 높이 계산 규칙](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting)은 참여하는 상자와 정렬을 바탕으로 줄 상자를 결정합니다. 보이는 콘텐츠가 그래픽뿐이어도 부모의 글꼴과 줄 높이가 기여합니다. 따라서 정확한 띠 높이는 고정된 SVG 여백이 아니라 주변 스타일의 결과입니다.

이 기준선을 SVG *내부*에 그린 글자의 기준선과 혼동하지 마세요. SVG 텍스트 요소의 `dominant-baseline`을 바꾸는 것은 내부 글자를 조정합니다. 전체 그래픽이 HTML 줄에서 어떻게 놓이는지는 결정하지 않습니다.

### SVG 캔버스에 빈 공간이 없는 측정 예제

같은 SVG 사본 세 개가 있는 HTML 페이지를 직접 만들었습니다. 각 SVG에는 사각형이 끝까지 채운 `240 × 100` viewBox가 있고 `240 × 100` CSS 픽셀로 렌더링됩니다. 행은 Arial `40px`, 줄 높이 `48px`을 사용합니다. SVG의 표시 방식이나 정렬만 달라집니다.

브라우저가 반환한 요소 측정값은 다음과 같습니다.

| SVG 처리      | SVG 높이 | 행 높이    | SVG 상자 아래 공간 |
| ----------- | ------ | ------- | ------------ |
| 인라인, 기준선 정렬 | 100px  | 110.5px | 10.5px       |
| 블록 표시       | 100px  | 100px   | 0px          |
| 인라인, 아래 정렬  | 100px  | 100px   | 0px          |

![같은 단색 SVG의 브라우저 비교: 인라인 기준선 버전 아래에는 10.5픽셀 띠가 있고 블록 및 아래 정렬 버전에는 띠가 없음](https://perfectvector.com/blog/inline-svg-baseline-gap/line-box-comparison.webp)

*칠해진 사각형은 각 SVG를 가득 채웁니다. 첫 초록 상자 아래의 복숭아색 띠는 viewBox의 여분 공간이 아니라 HTML 행에 속합니다.*

이는 한 브라우저에서 이 페이지를 측정한 값이며 모든 레이아웃에 10.5px 틈이 생긴다는 뜻은 아닙니다. 래퍼 아래 좌표와 SVG 아래 좌표를 비교했습니다. SVG 높이는 세 경우 모두 100px로 유지되어 수정이 그림을 축소하거나 자르지 않았습니다.

## 독립 그래픽에는 블록 표시를 사용하세요

로고가 독립 행을 차지해야 한다면 그 이미지에만 레이아웃 규칙을 지정하세요.

```css
.brand-mark {
  display: block;
  width: 240px;
  height: auto;
}
```

[MDN display 참조](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display)는 흐름 레이아웃에서 블록과 인라인 참여를 구분합니다. SVG를 블록으로 만들면 주변 텍스트 줄에서 인라인 항목 역할이 없어집니다. 원본 경로를 편집하거나 투명 도안 여백을 제거하지는 않습니다.

규칙을 적용한 뒤 래퍼를 다시 확인하세요. 이미지 아래로 계속 이어지면 명시적 높이, 패딩, 다른 자식, 의사 요소, 추가 줄을 찾습니다. 블록 그래픽 뒤의 줄바꿈이나 텍스트 노드도 자체 콘텐츠를 만들 수 있습니다. 상위 요소가 보이는 공간의 원인일 수도 있습니다.

선택자 범위를 좁게 유지하세요. 사이트 전체에 `svg { display: block; }`을 적용하면 라벨이나 문장 안에 있어야 하는 아이콘이 움직일 수 있습니다. 독립 그래픽이 필요한 컴포넌트를 고른 뒤 다른 사용처도 검사합니다.

## 텍스트 옆 그래픽은 인라인으로 두고 정렬을 선택하세요

단어 옆의 아이콘이나 작은 마크는 인라인 유지가 의도한 배치일 수 있습니다. `vertical-align: bottom`은 아래 마진 가장자리를 줄 아래에 맞춥니다. `vertical-align: middle`은 부모의 기준선과 x 높이를 사용하며 모든 컨테이너의 모든 이미지를 기하학적 중앙에 놓는 명령이 아닙니다. [MDN vertical-align 정의](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align)를 참고하세요.

```css
.label-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
```

실제 라벨과 글꼴을 보며 값을 선택하세요. 줄 아래에 닿는 아이콘은 대문자 옆에서 너무 낮아 보일 수 있습니다. `middle` 정렬도 자체 상자 안에서 도안이 불균일하게 분포한다면 시각적인 조정이 필요할 수 있습니다.

예제의 아래 정렬 행에는 그래픽만 있었습니다. 그 특정 행에서 띠가 제거됨을 입증합니다. 텍스트와 아이콘이 섞인 모든 행의 높이나 모양이 같다고 입증하는 것은 아닙니다.

공유 텍스트 컨테이너에 `line-height: 0`을 첫 해결책으로 사용하지 마세요. 이미지 간격과 함께 텍스트 배치도 바뀝니다. 당장 증상은 가려도 나중에 라벨을 추가할 때 재설정에 의존하는 컴포넌트가 될 수 있습니다. 부모 타이포그래피를 바꾸기 전에 의도한 표시 방식과 정렬을 선택하세요.

## 그림을 바꾸지 않고 수정 검증하기

한 번에 하나씩 바꾸고 다음을 확인하세요.

1. **요소 경계:** 이제 보이는 틈이 SVG 상자 안에 있는가, 밖에 있는가?
2. **치수:** SVG가 의도한 폭, 높이, 비율을 유지하는가?
3. **이웃 요소:** 라벨, 링크, 아이콘이 여전히 제자리에 있는가?
4. **반응형 배치:** 컴포넌트가 좁고 넓은 크기에서 올바르게 동작하는가?
5. **계산된 스타일:** 의도한 선언이 적용되는가, 더 구체적인 규칙이 덮어쓰는가?

테두리나 패딩이 없는 단순 래퍼에서는 래퍼 아래 좌표와 이미지 아래 좌표를 비교하는 것이 유용합니다. 실제 컴포넌트에서는 의도한 패딩과 다른 콘텐츠를 고려한 뒤 그 차이를 오류라고 판단하세요.

작은 화면에서 다른 배열이 필요하다면 그것도 확인하세요. 로고 하나에서는 맞는 수정이 줄바꿈 텍스트가 있는 탐색 행에는 맞지 않을 수 있습니다. 경계가 명확해지면 임시 배경색을 제거합니다.

## 이 작업에 벡터화가 도움이 되는 경우

편집 가능한 기존 SVG라면 여기서는 보통 CSS나 캔버스 수정이 필요합니다. 파일을 유지하고 재구성하기 전에 배치를 진단하세요.

마크 자체가 PNG나 JPG로만 있고 편집 가능한 윤곽이 필요하다면 [PerfectVector로 원본 이미지를 벡터 도안으로 바꾼](https://perfectvector.com/ko/image-to-vector) 뒤 외곽선, 구멍, 원본 캔버스를 검사하고 페이지에 배치하세요. [추적 품질 평가표](https://perfectvector.com/ko/blog/evaluate-vector-trace-quality)가 별도 형상 검사에 도움이 됩니다. 벡터화는 도형을 준비하고 HTML 줄 상자는 여전히 페이지 CSS가 제어합니다.

## 자주 묻는 질문

**margin: 0으로 SVG 아래 틈이 사라지지 않는 이유는 무엇인가요?**
공간이 SVG의 마진이 아니라 이를 포함하는 텍스트 줄에 속할 수 있습니다. SVG와 래퍼 경계를 검사한 뒤 독립 이미지에는 블록 표시, 인라인 그래픽에는 적절한 세로 정렬을 시험하세요.

**display: block이 SVG 내부 빈 공간을 잘라내나요?**
아닙니다. HTML 레이아웃에 참여하는 방식을 바꿉니다. viewBox 안의 빈 공간은 남으며 별도의 도안 또는 맞춤 검사가 필요합니다.

**vertical-align: bottom과 middle 중 무엇을 써야 하나요?**
실제 행에 맞는 값을 쓰세요. bottom은 줄 아래에 맞추고 middle은 부모의 기준선과 x 높이를 사용합니다. 어느 값도 보편적인 중앙 정렬로 취급하지 말고 최종 글꼴과 옆 텍스트에서 결과를 보세요.

## 출처

1. [W3C — CSS 줄 높이와 세로 정렬](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting) — 참여 상자, 정렬, 부모 타이포그래피가 줄 높이에 기여하는 방식입니다.
2. [MDN — display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) — 흐름 레이아웃에서 블록과 인라인 참여의 차이입니다.
3. [MDN — vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align) — 기준선·아래·가운데 정렬 및 속성이 적용되는 상자입니다.

***

래스터 이미지로만 있는 마크에서 시작하나요? [편집 가능한 SVG 도형을 준비](https://perfectvector.com/ko/image-to-vector)해 윤곽과 캔버스를 원본과 비교한 뒤 실제 페이지 컴포넌트에서 SVG 배치를 확인하세요.

## Explore

- [Read the HTML article](https://perfectvector.com/ko/blog/inline-svg-baseline-gap)
- [SVG 로고 레이아웃 밀림 방지: 표시 전 크기와 종횡비 예약하기](https://perfectvector.com/ko/blog/svg-logo-layout-reservation.md)
- [다크 모드 SVG 로고 색상 제어: 사용자 설정과 페이지 테마 선택](https://perfectvector.com/ko/blog/dark-mode-svg-logo.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)