Usuń odstęp pod SVG inline za pomocą układu CSS

Wąski odstęp pod SVG może pochodzić z zawierającego go wiersza HTML. Grafika inline uczestniczy w układzie tekstu, w którym linia bazowa i wysokość wiersza mogą zostawiać miejsce pod jej polem. Dla samodzielnego obrazu wypróbuj display: block. Dla grafiki, która musi pozostać obok tekstu, świadomie wybierz wyrównanie inline.

Najpierw zlokalizuj odstęp. Przestrzeń poza polem elementu SVG wymaga sprawdzenia układu strony. Przestrzeń wewnątrz tego pola może należeć do płótna SVG lub zasad dopasowania. Ponowne odrysowanie logo nie naprawi pierwszego problemu. Ten poradnik pomaga rozróżnić oba przypadki i sprawdzić małą lokalną poprawkę CSS.

Ustal, które pole zawiera pustą przestrzeń

W narzędziach deweloperskich przeglądarki nadaj SVG i jego bezpośredniemu opakowaniu kontrastowe tła. Sprawdź też obrysy ich elementów. Tło jest tymczasową pomocą diagnostyczną; nie musi stać się częścią dostarczanej grafiki.

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

Jeśli brzoskwiniowy kolor sięga poniżej zielonego pola SVG, sprawdź układ wiersza, padding, obramowanie, wysokość i sąsiednie elementy opakowania. Jeśli zieleń sięga poniżej widocznego rysunku, sprawdź viewBox grafiki, granice jej rysunku i sposób dopasowania do okna widoku.

Oba problemy mogą występować jednocześnie. Naprawa pola wiersza może usunąć cienki pasek, pozostawiając większy przezroczysty margines wewnątrz obrazu. Poradnik dopasowania SVG wyjaśnia wzajemne działanie prostokąta źródłowego i docelowego okna widoku. Nie zacieśniaj viewBox, dopóki nie wiesz, że niechciane miejsce znajduje się wewnątrz niego.

Znaczenie ma też metoda osadzenia. <svg> inline jest częścią dokumentu HTML; <img src="logo.svg"> wczytuje obraz zewnętrzny. Ich granice stylowania różnią się, co wyjaśnia poradnik SVG inline i obrazu. W tej diagnozie sprawdzaj element umieszczony w wierszu HTML, zamiast zakładać, że każdy plik SVG osadzono tak samo.

Dlaczego linia bazowa może zostawiać miejsce pod spodem

Wiersze tekstu potrzebują miejsca na litery schodzące poniżej linii bazowej, takie jak g i p. Grafika inline może być wyrównana do tej linii, podczas gdy zawierający ją wiersz nadal sięga poniżej. Dlatego wyzerowanie marginesu obrazu może niczego nie zmienić.

Reguły obliczania wysokości wiersza CSS ustalają pole wiersza na podstawie uczestniczących pól i ich wyrównania. Czcionka i wysokość wiersza rodzica mają wpływ nawet wtedy, gdy widoczną zawartością jest grafika. Dokładny pasek jest zatem wynikiem otaczających stylów, a nie stałym marginesem SVG.

Nie myl tej linii bazowej z linią bazową liter narysowanych wewnątrz SVG. Zmiana dominant-baseline w elemencie tekstowym SVG dotyczy tych wewnętrznych liter. Nie wybiera położenia całej grafiki w jej wierszu HTML.

Zmierzony przykład bez pustego płótna SVG

Stworzyliśmy autorską stronę HTML z trzema kopiami tego samego SVG. Każdy SVG ma viewBox o wymiarach 240 × 100, wypełniony prostokątem od krawędzi do krawędzi, i jest renderowany w rozmiarze 240 × 100 pikseli CSS. Wiersze używają Arial 40px z wysokością wiersza 48px. Zmienia się tylko tryb wyświetlania lub wyrównanie SVG.

Przeglądarka zwróciła następujące pomiary elementów:

To pomiary tej strony w jednej przeglądarce, a nie obietnica odstępu 10,5px w każdym układzie. Porównaliśmy dolną współrzędną opakowania z dolną współrzędną SVG. Wysokość SVG pozostała równa 100px we wszystkich trzech przypadkach, więc poprawka nie zmniejszyła ani nie przycięła rysunku.

Użyj wyświetlania blokowego dla samodzielnej grafiki

Gdy logo ma zajmować własny wiersz, przypisz regułę układu temu konkretnemu obrazowi:

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

Dokumentacja display w MDN rozróżnia blokowy i liniowy udział w układzie przepływowym. Uczynienie SVG blokiem usuwa jego rolę elementu inline w otaczającym wierszu tekstu. Nie edytuje ścieżek źródłowych ani nie usuwa przezroczystych marginesów grafiki.

Po zastosowaniu reguły sprawdź ponownie opakowanie. Jeśli nadal sięga pod obraz, szukaj jawnej wysokości, paddingu, innego dziecka, pseudoelementu lub dodatkowego wiersza. Podział wiersza lub węzeł tekstowy za grafiką blokową może wprowadzić własną zawartość. Za widoczną przestrzeń może też odpowiadać przodek.

Użyj wąskiego selektora. Zastosowanie svg { display: block; } w całej witrynie może przesunąć ikony celowo umieszczone wewnątrz etykiet lub zdań. Wybierz komponent potrzebujący samodzielnej grafiki, a następnie sprawdź jego pozostałe zastosowania.

Zachowaj grafikę w tekście jako inline i wybierz wyrównanie

Dla ikony lub małego znaku obok słów układ inline może być zamierzony. vertical-align: bottom wyrównuje dolną krawędź marginesu do dołu wiersza. vertical-align: middle wykorzystuje linię bazową i wysokość x rodzica; nie jest poleceniem geometrycznego wyśrodkowania każdego obrazu w każdym kontenerze. Zobacz definicje vertical-align w MDN.

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

Wybierz wartość, oglądając rzeczywistą etykietę i czcionkę. Ikona dotykająca dołu wiersza może wyglądać zbyt nisko obok wielkich liter. Znak wyrównany przez middle może nadal wymagać korekty optycznej, ponieważ widoczna grafika jest nierówno rozłożona we własnym polu.

Przypadek wyrównany do dołu w naszym przykładzie zawierał tylko grafikę. Dowodzi, że to wyrównanie usunęło pasek w tym konkretnym wierszu. Nie ustala, że każdy wiersz łączący tekst i ikonę będzie mieć tę samą wysokość lub wygląd.

Nie zaczynaj naprawy od line-height: 0 we współdzielonym kontenerze tekstowym. Zmienia to układ tekstu oraz odstępy obrazów. Może ukryć bezpośredni objaw, pozostawiając komponent zależny od późniejszych nadpisań, gdy ktoś doda etykietę. Wybierz zamierzony tryb wyświetlania lub wyrównanie przed zmianą typografii rodzica.

Sprawdź poprawkę bez zmieniania grafiki

Wprowadzaj jedną zmianę naraz, a potem sprawdź:

1. Granica elementu: czy widoczny odstęp leży teraz wewnątrz, czy poza polem SVG?
2. Wymiary: czy SVG zachował zamierzoną szerokość, wysokość i proporcje?
3. Sąsiedztwo: czy etykiety, łącza i ikony nadal znajdują się we właściwych miejscach?
4. Układ responsywny: czy komponent działa przy małych i dużych rozmiarach?
5. Obliczone style: czy zamierzona deklaracja wygrywa, czy nadpisuje ją bardziej szczegółowa reguła?

Dla prostego opakowania bez obramowania i paddingu przydatne jest porównanie dolnej współrzędnej z dolną współrzędną obrazu. W rzeczywistym komponencie uwzględnij zamierzony padding i inną zawartość, zanim uznasz różnicę za błąd.

Jeśli strona potrzebuje innego układu na mniejszych ekranach, sprawdź również ten układ. Poprawka działająca dla osobnego logo może nie pasować do wiersza nawigacji z zawijającym się tekstem. Usuń tymczasowe kolory tła, gdy granica będzie jasna.

Kiedy wektoryzacja pomaga w tym procesie

Istniejący edytowalny SVG zwykle potrzebuje tutaj poprawki CSS lub płótna. Zachowaj plik i zdiagnozuj umieszczenie przed jego odtworzeniem.

Jeśli sam znak istnieje tylko jako PNG lub JPG i potrzebuje edytowalnych konturów, użyj PerfectVector do konwersji obrazu źródłowego na grafikę wektorową, a następnie sprawdź kontur, otwory i płótno źródłowe przed umieszczeniem wyniku na stronie. Karta oceny jakości wektoryzacji pomaga w tej osobnej kontroli geometrii. Wektoryzacja przygotowuje kształty; CSS strony nadal steruje polem wiersza HTML.

FAQ

Dlaczego margin: 0 nie usuwa odstępu pod SVG? Przestrzeń może należeć do zawierającego wiersza tekstu, a nie marginesów SVG. Sprawdź granice SVG i opakowania, a następnie przetestuj wyświetlanie blokowe dla samodzielnego obrazu lub odpowiednie wyrównanie pionowe dla grafiki inline.

Czy display: block przycina puste miejsce z SVG? Nie. Zmienia udział elementu w układzie HTML. Puste miejsce wewnątrz viewBox pozostaje i wymaga osobnego sprawdzenia grafiki lub dopasowania.

Czy użyć vertical-align: bottom, czy middle? Użyj wartości pasującej do rzeczywistego wiersza. Bottom wyrównuje do dołu wiersza; middle korzysta z linii bazowej i wysokości x rodzica. Sprawdź wynik z końcową czcionką i sąsiednim tekstem, zamiast traktować którąkolwiek wartość jako uniwersalne centrowanie.

Źródła

1. W3C — Wysokość wiersza i wyrównanie pionowe CSS — Jak uczestniczące pola, wyrównanie i typografia rodzica wpływają na wysokość wiersza.
2. MDN — display — Różnica między blokowym i liniowym udziałem w układzie przepływowym.
3. MDN — vertical-align — Wyrównanie do linii bazowej, dołu i środka oraz pola, do których stosuje się właściwość.

Zaczynasz od znaku dostępnego tylko jako raster? Przygotuj edytowalne kształty SVG, porównaj kontury i płótno ze źródłem, a następnie sprawdź położenie SVG w rzeczywistym komponencie strony.