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

# Satır içi SVG altındaki boşluğu CSS düzeniyle giderin

> SVG altındaki boşluğun HTML satır kutusundan mı çizimden mi geldiğini bulun, ardından blok gösterim veya satır içi hizalama seçip sonucu doğrulayın.

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

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

SVG'nin altındaki dar boşluk, onu içeren HTML satırından gelebilir. Satır içi grafik metin düzenine katılır; taban çizgisi ve satır yüksekliği kutusunun altında yer bırakabilir. Bağımsız görüntü için `display: block` deneyin. Metnin yanında kalması gereken grafiğin satır içi hizasını bilinçli seçin.

Önce boşluğu bulun. **SVG öğesinin kutusu dışındaki** alan sayfa düzeni kontrolü ister. **Kutunun içindeki** alan SVG tuvalinden veya sığdırma kurallarından kaynaklanabilir. Logoyu yeniden vektörleştirmek ilk sorunu çözmez. Bu rehber ikisini ayırmanıza ve küçük, yerel CSS düzeltmesini doğrulamanıza yardımcı olur.

## Boşluğu hangi kutunun içerdiğini bulun

Tarayıcının geliştirici araçlarında SVG'ye ve hemen üst kapsayıcısına zıt arka planlar verin. Öğe sınırlarını da inceleyin. Arka plan geçici tanılama yardımcısıdır; teslim edilen çizimin parçası olmak zorunda değildir.

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

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

Şeftali rengi yeşil SVG kutusunun altında sürüyorsa kapsayıcının satır düzenini, iç payını, kenarlığını, yüksekliğini ve komşu öğelerini inceleyin. Yeşil, görünen çizimin altında sürüyorsa çizimin `viewBox` değerini, boyalı sınırlarını ve görünüm alanına nasıl sığdığını inceleyin.

İkisi birlikte olabilir. Satır kutusunu düzeltmek ince şeridi kaldırırken görüntü içinde daha büyük saydam pay bırakabilir. [SVG sığdırma rehberi](https://perfectvector.com/tr/blog/svg-preserveaspectratio), kaynak dikdörtgen ile hedef görünüm alanının etkileşimini açıklar. İstenmeyen alanın içinde olduğunu bilmeden `viewBox` değerini daraltmayın.

Gömme yöntemi de önemlidir. Satır içi `<svg>` HTML belgesinin parçasıdır; `<img src="logo.svg">` dış görüntü yükler. [Satır içi SVG ve görüntü rehberinin](https://perfectvector.com/tr/blog/inline-svg-vs-img) açıkladığı gibi stil sınırları farklıdır. Bu teşhiste, her SVG dosyasının aynı şekilde gömüldüğünü varsaymak yerine HTML satırına yerleştirilmiş öğeyi inceleyin.

## Taban çizgisi neden altta alan bırakabilir?

Metin satırlarında `g` ve `p` gibi taban çizgisinin altına inen harflere yer gerekir. Satır içi grafik o taban çizgisine hizalanabilirken onu içeren satır daha aşağı uzanabilir. Bu yüzden görüntünün dış payını sıfırlamak hiçbir şeyi değiştirmeyebilir.

[CSS satır yüksekliği hesap kuralları](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting), satır kutusunu katılan kutulardan ve hizalarından belirler. Görünen içerik grafik olsa bile üst öğenin yazı tipi ve satır yüksekliği katkıda bulunur. Tam şerit sabit SVG payı değil, çevre stillerin sonucudur.

Bu taban çizgisini SVG'nin *içinde* çizilmiş harflerin taban çizgisiyle karıştırmayın. SVG metin öğesinde `dominant-baseline` değiştirmek iç harfleri etkiler. Bütün grafiğin HTML satırında nasıl duracağını seçmez.

### Boş SVG tuvali olmayan ölçülü örnek

Aynı SVG'nin üç kopyasını içeren özgün HTML sayfası yaptık. Her SVG'nin kenardan kenara dikdörtgenle dolu `240 × 100` viewBox'ı vardır ve `240 × 100` CSS pikselinde görüntülenir. Satırlar `40px` Arial ve `48px` satır yüksekliği kullanır. Yalnızca SVG'nin gösterimi veya hizası değişir.

Tarayıcı şu öğe ölçülerini verdi:

| SVG uygulaması                    | SVG yüksekliği | Satır yüksekliği | SVG kutusunun altındaki alan |
| --------------------------------- | -------------- | ---------------- | ---------------------------- |
| Satır içi, taban çizgisine hizalı | 100px          | 110.5px          | 10.5px                       |
| Blok gösterim                     | 100px          | 100px            | 0px                          |
| Satır içi, alta hizalı            | 100px          | 100px            | 0px                          |

![Aynı dolu SVG'nin tarayıcı karşılaştırması: satır içi taban çizgisi sürümünde altta 10.5 piksel şerit, blok ve alta hizalı sürümlerde sıfır şerit](https://perfectvector.com/blog/inline-svg-baseline-gap/line-box-comparison.webp)

*Boyalı dikdörtgen her SVG'yi doldurur. İlk yeşil kutunun altındaki şeftali şeridi, viewBox içindeki ek boşluğa değil HTML satırına aittir.*

Bunlar tek tarayıcıdaki bu sayfanın ölçüleridir; her düzende 10.5px boşluk olacağı vaadi değildir. Kapsayıcının alt koordinatını SVG'nin alt koordinatıyla karşılaştırdık. Üç durumda da SVG yüksekliği 100px kaldı; düzeltme çizimi küçültmedi veya kırpmadı.

## Bağımsız grafik için blok gösterim kullanın

Logo kendi satırını kaplamalıysa düzen kuralını o belirli görüntüye uygulayın:

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

[MDN display referansı](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display), akış düzeninde blok ve satır içi katılımı ayırır. SVG'yi blok yapmak çevre metin satırındaki satır içi öğe rolünü kaldırır. Kaynak yollarını düzenlemez veya saydam çizim paylarını silmez.

Kuraldan sonra kapsayıcıyı yeniden kontrol edin. Hâlâ görüntünün altına uzanıyorsa açık yükseklik, iç pay, başka alt öğe, sözde öğe veya ek satır arayın. Blok grafik sonrası satır sonu veya metin düğümü kendi içeriğini ekleyebilir. Görünen alandan daha üst bir öğe de sorumlu olabilir.

Seçiciyi dar tutun. Tüm sitede `svg { display: block; }` uygulamak, bilerek etiket veya cümle içinde duran simgeleri taşıyabilir. Bağımsız grafik isteyen bileşeni seçip diğer kullanımlarını inceleyin.

## Metin satırı grafiklerini satır içi tutup hizayı seçin

Sözcük yanındaki simge veya küçük işarette satır içi kalmak hedef düzen olabilir. `vertical-align: bottom`, alt dış pay kenarını satırın altına hizalar. `vertical-align: middle`, üst öğenin taban çizgisini ve x yüksekliğini kullanır; her görüntüyü her kapsayıcıda geometrik merkezleme komutu değildir. [MDN vertical-align tanımlarına](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align) bakın.

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

Gerçek etiketi ve yazı tipini inceleyerek bu değerleri seçin. Satırın altına dokunan simge büyük harflerin yanında fazla aşağıda görünebilir. `middle` hizalı işarette de optik ayar gerekebilir; görünür çizim kendi kutusunda dengesiz dağılmış olabilir.

Örneğimizin alta hizalı durumu yalnızca grafik içeriyordu. Bu hizanın o belirli satırdaki şeridi kaldırdığını kanıtlar. Her karma metin-simge satırının aynı yüksekliğe veya görünüme sahip olacağını kanıtlamaz.

İlk düzeltme olarak ortak metin kapsayıcısında `line-height: 0` kullanmaktan kaçının. Görüntü aralığıyla birlikte metin düzenini de değiştirir. Anlık belirtiyi gizlerken biri etiket eklediğinde bileşeni sonraki geçersiz kılmalara bağımlı bırakabilir. Üst öğenin tipografisini değiştirmeden hedef gösterimi veya hizayı seçin.

## Çizimi değiştirmeden düzeltmeyi doğrulayın

Her seferinde tek değişiklik yapıp kontrol edin:

1. **Öğe sınırı:** Görünen boşluk şimdi SVG kutusunun içinde mi, dışında mı?
2. **Ölçüler:** SVG hedef genişliği, yüksekliği ve oranları korudu mu?
3. **Komşular:** Etiketler, bağlantılar ve simgeler hâlâ yerinde mi?
4. **Duyarlı düzen:** Bileşen dar ve geniş boyutlarında doğru davranıyor mu?
5. **Hesaplanan stiller:** Hedef bildirim etkili mi, yoksa daha özel kural üzerine mi yazıyor?

Kenarlıksız ve iç paysız basit kapsayıcıda alt koordinatını görüntünün alt koordinatıyla karşılaştırmak yararlı kontroldür. Gerçek bileşende farkı hata saymadan önce amaçlanan iç payı ve diğer içeriği hesaba katın.

Sayfa küçük ekranlarda farklı düzen istiyorsa onu da doğrulayın. Tek logoda çalışan düzeltme, metni satıra saran gezinme çubuğuna uymayabilir. Sınır netleşince geçici arka plan renklerini kaldırın.

## Vektörleştirme bu iş akışına ne zaman yardımcı olur?

Mevcut düzenlenebilir SVG burada genellikle CSS veya tuval düzeltmesi ister. Yeniden oluşturmadan önce dosyayı koruyup yerleşimini teşhis edin.

İşaret yalnızca PNG veya JPG olarak varsa ve düzenlenebilir konturlar gerekiyorsa [PerfectVector ile kaynak görüntüyü vektör çizime dönüştürün](https://perfectvector.com/tr/image-to-vector); sayfaya yerleştirmeden konturu, açıklıkları ve kaynak tuvali inceleyin. [Kontur kalitesi değerlendirmesi](https://perfectvector.com/tr/blog/evaluate-vector-trace-quality), bu ayrı geometri kontrolüne yardımcı olur. Vektörleştirme şekilleri hazırlar; HTML satır kutusunu yine sayfanın CSS'si yönetir.

## Sık sorulan sorular

**margin: 0 SVG altındaki boşluğu neden kaldırmıyor?**
Alan SVG'nin dış payına değil, onu içeren metin satırına ait olabilir. SVG ve kapsayıcı sınırlarını inceleyin; bağımsız görüntü için blok gösterimi, satır içi grafik için uygun dikey hizayı deneyin.

**display: block SVG'nin boşluğunu kırpar mı?**
Hayır. Öğenin HTML düzenine katılımını değiştirir. viewBox içindeki boş alan kalır ve ayrı çizim veya sığdırma kontrolü ister.

**vertical-align: bottom mı, middle mı kullanmalıyım?**
Gerçek satıra uyan değeri kullanın. Bottom satırın altına hizalar; middle üst öğenin taban çizgisini ve x yüksekliğini kullanır. İkisini de evrensel merkezleme saymak yerine sonucu son yazı tipi ve komşu metinle inceleyin.

## Kaynaklar

1. [W3C — CSS satır yüksekliği ve dikey hizalama](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting) — Katılan kutuların, hizanın ve üst öğe tipografisinin satır yüksekliğine katkısı.
2. [MDN — display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) — Akış düzeninde blok ve satır içi katılım farkı.
3. [MDN — vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align) — Taban, alt ve orta hizalama ile özelliğin uygulandığı kutular.

***

Yalnızca raster işaretle mi başlıyorsunuz? [Düzenlenebilir SVG şekilleri hazırlayın](https://perfectvector.com/tr/image-to-vector), konturlarını ve tuvalini kaynakla karşılaştırın; sonra SVG'nin gerçek sayfa bileşenindeki yerleşimini doğrulayın.

## Explore

- [Read the HTML article](https://perfectvector.com/tr/blog/inline-svg-baseline-gap)
- [SVG Logo Düzen Kaymasını Alan Ayırarak Önleyin](https://perfectvector.com/tr/blog/svg-logo-layout-reservation.md)
- [Koyu mod SVG logosu: Rengi neyin yöneteceğini seçin](https://perfectvector.com/tr/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)