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

# Уберите зазор под встроенным SVG с помощью CSS

> Определите, относится ли зазор под SVG к строке HTML или рисунку. Выберите блочный вывод либо выравнивание inline и проверьте результат.

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

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

Узкий зазор под SVG может происходить от содержащей его строки HTML. Встроенная графика участвует в текстовой раскладке, где базовая линия и высота строки могут оставлять место под ее прямоугольником. Для отдельного изображения попробуйте `display: block`. Для графики, которая должна оставаться рядом с текстом, намеренно выберите строчное выравнивание.

Сначала найдите зазор. Пространство **снаружи прямоугольника элемента SVG** требует проверки верстки страницы. Пространство **внутри этого прямоугольника** может относиться к холсту SVG или правилам вписывания. Повторная трассировка логотипа не решит первую проблему. Руководство поможет различить их и проверить небольшое локальное исправление CSS.

## Найдите прямоугольник, содержащий пустоту

Задайте SVG и ближайшей обертке контрастные фоны в инструментах разработчика браузера. Изучите также контуры элементов. Фон — временный диагностический прием; он не должен становиться частью передаваемого рисунка.

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

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

Если персиковый цвет продолжается ниже зеленого прямоугольника SVG, проверьте строковую раскладку, padding, рамку, высоту и соседние элементы обертки. Если зеленый продолжается ниже видимого рисунка, проверьте его `viewBox`, окрашенные границы и вписывание в окно просмотра.

Оба случая могут происходить вместе. Исправление строки может убрать тонкую полоску, оставив большой прозрачный отступ внутри изображения. [Руководство по вписыванию SVG](https://perfectvector.com/ru/blog/svg-preserveaspectratio) объясняет взаимодействие исходного прямоугольника и целевого окна просмотра. Не сужайте `viewBox`, пока не установите, что нежелательное пространство находится внутри него.

Способ встраивания тоже важен. Встроенный `<svg>` — часть документа HTML; `<img src="logo.svg">` загружает внешнее изображение. Границы стилизации различаются, как объясняет [руководство по inline SVG и img](https://perfectvector.com/ru/blog/inline-svg-vs-img). Для этой диагностики изучайте элемент в строке HTML, не предполагая одинаковое встраивание всех SVG-файлов.

## Почему базовая линия оставляет место снизу

Строкам текста нужно место для букв, опускающихся ниже базовой линии, например `g` и `p`. Встроенная графика может выравниваться по этой линии, пока содержащая строка продолжается ниже. Поэтому сброс margin изображения в ноль может ничего не изменить.

[Правила расчета высоты строки CSS](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting) определяют прямоугольник строки по участвующим прямоугольникам и их выравниванию. Шрифт и высота строки родителя влияют даже тогда, когда видимое содержимое — графика. Поэтому точная полоска является результатом окружающих стилей, а не фиксированным отступом SVG.

Не путайте эту базовую линию с базовой линией букв, нарисованных *внутри* SVG. Изменение `dominant-baseline` у текстового элемента SVG относится к внутренним буквам. Оно не выбирает положение всей графики в строке HTML.

### Измеренный пример без пустого холста SVG

Мы создали авторскую страницу HTML с тремя копиями одного SVG. Каждый SVG имеет viewBox `240 × 100`, полностью заполненный прямоугольником до краев, и выводится в размере `240 × 100` пикселей CSS. Строки используют Arial `40px` с высотой строки `48px`. Меняется только display или выравнивание SVG.

Браузер вернул такие измерения элементов:

| Режим SVG                | Высота SVG | Высота строки | Место под прямоугольником SVG |
| ------------------------ | ---------- | ------------- | ----------------------------- |
| Inline, по базовой линии | 100px      | 110.5px       | 10.5px                        |
| Блочный вывод            | 100px      | 100px         | 0px                           |
| Inline, по нижнему краю  | 100px      | 100px         | 0px                           |

![Сравнение в браузере одного сплошного SVG с полосой 10.5 пикселя под строчной версией по базовой линии и без полосы у блочной и выровненной по нижнему краю версий](https://perfectvector.com/blog/inline-svg-baseline-gap/line-box-comparison.webp)

*Окрашенный прямоугольник заполняет каждый SVG. Персиковая полоска под первым зеленым прямоугольником относится к строке HTML, а не к лишнему пространству viewBox.*

Это измерения одной страницы в одном браузере, а не обещание зазора 10.5px в любой верстке. Мы сравнили нижнюю координату обертки с нижней координатой SVG. Высота SVG оставалась 100px во всех случаях, поэтому исправление не сжало и не обрезало рисунок.

## Используйте блочный вывод для отдельной графики

Если логотип должен занимать собственную строку, задайте правило именно этому изображению:

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

[Справочник display MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) различает блочное и строчное участие в потоковой раскладке. Блочный SVG перестает быть строчным элементом окружающей текстовой строки. Это не редактирует исходные контуры и не убирает прозрачные поля рисунка.

Повторно проверьте обертку после применения правила. Если она все еще идет ниже изображения, ищите явную высоту, padding, другого потомка, псевдоэлемент или дополнительную строку. Перенос строки или текстовый узел после блочной графики может добавлять собственное содержимое. За видимое пространство также может отвечать предок.

Ограничьте селектор. Применение `svg { display: block; }` по всему сайту может переместить иконки, намеренно встроенные в подписи или предложения. Выберите компонент, которому нужна отдельная графика, затем проверьте другие его применения.

## Сохраните графику рядом с текстом строчной и выберите выравнивание

Для иконки или небольшого знака рядом со словами строчная раскладка может быть намеренной. `vertical-align: bottom` выравнивает нижний край margin по низу строки. `vertical-align: middle` использует базовую линию и высоту x родителя; это не команда геометрического центрирования каждого изображения в любом контейнере. См. [определения vertical-align MDN](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` у общего текстового контейнера. Это меняет и текстовую раскладку, и интервалы изображения. Прием может скрыть немедленный симптом, оставив компонент зависимым от поздних переопределений после добавления подписи. Выберите нужный display или выравнивание до изменения типографики родителя.

## Проверьте исправление без изменения рисунка

Меняйте по одному параметру, затем проверяйте:

1. **Граница элемента:** зазор теперь внутри или снаружи прямоугольника SVG?
2. **Размеры:** сохранил ли SVG нужную ширину, высоту и пропорции?
3. **Соседи:** остались ли подписи, ссылки и иконки на своих местах?
4. **Адаптивная верстка:** как компонент ведет себя при узком и широком размере?
5. **Вычисленные стили:** побеждает ли нужное объявление или его перекрывает более специфичное правило?

Для простой обертки без рамок и padding полезно сравнить нижнюю координату с нижней координатой изображения. В реальном компоненте учтите намеренный padding и другое содержимое, прежде чем считать разницу ошибкой.

Если на малых экранах страница требует иной схемы, проверьте и ее. Исправление для отдельного логотипа может не подходить навигационной строке с переносимым текстом. Уберите временные фоновые цвета, когда граница станет понятной.

## Когда векторизация помогает в этом процессе

Существующему редактируемому SVG здесь обычно нужна правка CSS или холста. Сохраните файл и диагностируйте размещение до его восстановления.

Если сам знак существует только в PNG или JPG и нужны редактируемые контуры, [преобразуйте исходное изображение в вектор с PerfectVector](https://perfectvector.com/ru/image-to-vector), затем проверьте контур, отверстия и исходный холст перед размещением результата на странице. [Карта оценки качества трассировки](https://perfectvector.com/ru/blog/evaluate-vector-trace-quality) помогает с отдельной проверкой геометрии. Векторизация готовит фигуры; CSS страницы по-прежнему управляет прямоугольником строки HTML.

## FAQ

**Почему 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/ru/image-to-vector), сравните контуры и холст с исходником, затем проверьте положение SVG в реальном компоненте страницы.

## Explore

- [Read the HTML article](https://perfectvector.com/ru/blog/inline-svg-baseline-gap)
- [Как убрать сдвиги вёрстки из-за логотипа SVG](https://perfectvector.com/ru/blog/svg-logo-layout-reservation.md)
- [Логотип SVG в тёмной теме: кто управляет цветом](https://perfectvector.com/ru/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)