Padding w HTML (a właściwie w CSS, czyli kaskadowych arkuszach stylów) to określenie na odstęp wewnętrzny – przestrzeń pomiędzy zawartością danego elementu (np. tekstem, obrazem) a jego krawędzią (ramką). Padding nie wpływa na odstęp między różnymi elementami na stronie, ale na dystans „od środka do obramowania” tego samego elementu, poprawiając czytelność oraz wygląd projektu.
Czym dokładnie jest padding?
Padding, czyli dopełnienie, dodaje miejsce wokół treści wewnątrz elementu HTML. Dzięki temu możemy sprawić, że tekst w przycisku, akapicie czy polu formularza nie będzie przyklejony do krawędzi ramki lub tła, co ma duże znaczenie dla estetyki, wygody korzystania i czytelności witryny.
Można stosować padding do dowolnego elementu HTML, takiego jak <div>, <p>, <span>, <button>, <input> itd.
Właściwości powiązane z paddingiem
Padding ustawia się za pomocą właściwości CSS:
- padding – ustawia jednocześnie odstęp wewnętrzny z każdej strony (góra, prawo, dół, lewo);
- padding-top – odstęp od góry;
- padding-right – odstęp po prawej;
- padding-bottom – odstęp od dołu;
- padding-left – odstęp po lewej.
Jednostki – najczęściej używane to px (piksele), em, rem i %. Padding można ustawiać w jednej lub kilku jednostkach, także procentowo względem szerokości elementu.
Przykłady zastosowania paddingu
Dodanie odstępu wokół tekstu w przycisku
button { padding: 10px 20px; font-size: 16px; } Dzięki temu każdy przycisk będzie miał 10 pikseli odstępu od góry i dołu oraz 20 pikseli od lewej i prawej strony – tekst nie przyklei się do krawędzi.
Zwiększenie czytelności akapitu tekstu
p { padding: 16px; background-color: #f7f7f7; border-radius: 4px; } Daje to efekt „poduszki” wokół tekstu, dzięki czemu jest on czytelniejszy i lepiej odseparowany wizualnie od innych części strony.
Różne odstępy z każdej strony
div { padding-top: 8px; padding-right: 16px; padding-bottom: 8px; padding-left: 12px; } Możesz też stosować notację skróconą:
div { padding: 8px 16px 8px 12px; /* góra, prawo, dół, lewo */ } Odstęp wewnątrz elementu o borderze i tle
.box { border: 2px solid #333; background: #eef; padding: 24px; } W efekcie zawartość tego „pudełka” (np. obrazek lub tekst) nie będzie przylegać bezpośrednio do obramowania.
Padding a elementy inline i inline-block
Warto pamiętać: padding działa domyślnie na elementach blokowych (display: block;). Jeśli chcesz podać padding elementowi typu inline (np. <span> lub <a>), najlepiej zmienić jego zachowanie na inline-block –
a { display: inline-block; padding: 8px 12px; } Dzięki temu link staje się bardziej „przyciskowy” i czytelny.
Sposoby podawania paddingu
- Jedna wartość:
padding: 10px;– na wszystkich czterech bokach jednakowa, - Dwie wartości:
padding: 10px 20px;– góra/dół, prawo/lewo, - Trzy wartości:
padding: 10px 20px 8px;– góra, prawo/lewo, dół, - Cztery wartości:
padding: 10px 20px 8px 4px;– góra, prawo, dół, lewo (zgodnie z ruchem wskazówek zegara, zaczynając od góry).
Typowe zastosowania paddingu
- Poprawa czytelności tekstu.
- Zwiększanie klikalnego obszaru przycisków i linków.
- Tworzenie harmonijnych odstępów wewnątrz kart, boxów i formularzy.
- Odstępy przy ikonach i obrazkach wewnątrz komponentów użytkownika.
Podsumowanie
Padding to niezwykle ważny element stylowania w CSS, kluczowy dla komfortu użytkownika i przejrzystości projektu. Umożliwia kontrolę przestrzeni wewnątrz każdego elementu HTML, poprawiając wygląd strony i zwiększając jej funkcjonalność. Stosując padding, możesz skutecznie zadbać o czytelność oraz estetyczną prezentację zawartości swojej strony internetowej.
