Górny margines wewnętrzny {padding-top}
Jak dodać górny margines (odstęp) wewnątrz dowolnego elementu?
selektor { padding-top: rozmiar }Natomiast jako "rozmiar" należy podać konkretną wartość w jednostkach długości.
Polecenie to pozwala zdefiniować dodatkowy wewnętrzny odstęp pomiędzy elementami, np. tekstem i obramowaniem tabeli (co nie byłoby możliwe poprzez ustalenie marginesu - margin). Jest przydatne np. w połączeniu z tłem pod tekstem, obramowaniem, czy też tabelami.
📋 Zaznacz kod ▶ Edytuj na żywo
body { padding: 0 }Przykład {padding-top}
| Tekst w tej komórce tabeli jest oddalony od górnego brzegu obramowania o 1cm (padding-top: 1cm) |
Rzeczywiście w wielu przypadkach, praktycznie nie można ich odróżnić, np.:
Dla tego akapitu został określony margines wewnętrzny po lewej stronie, który wygląda tak samo, jak zwykły margines (margin).
Aby zrozumieć, jaka jest różnica pomiędzy zwykłym a wewnętrznym marginesem, spójrz na poniższy przykład:
Po wpisaniu:📋 Zaznacz kod ▶ Edytuj na żywo
<p style="background-color: silver; margin: 1cm; padding: 5mm">...</p>Otrzymamy:
To jest akapit z określonym marginesem zewnętrznym - 1cm (to ta odległość między brzegami strony (także sąsiadującymi elementami) a zewnętrznymi krawędziami szarego prostokąta). Natomiast margines wewnętrzny wynosi 5mm (to ta odległość między krawędziami szarego prostokąta a tekstem, który właśnie czytasz). Margines zewnętrzny leży na zewnątrz elementu (na zewnątrz szarego prostokąta), a margines wewnętrzny - wewnątrz.
To jest analogiczny przykład, ale z użyciem obramowania.
Dla porównania - to jest akapit z tłem, ale bez określenia marginesu wewnętrznego. Dlatego właśnie nie istnieje tutaj odstęp między szarym prostokątem a tekstem, który właśnie czytasz.
A to jest zwykły akapit z tłem, bez określenia jakichkolwiek marginesów. Dlatego jego szerokość wynosi tyle co zwykłego tekstu, a także wewnątrz elementu (prostokąta) nie ma żadnego odstępu.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | Poziom wsparcia min. 2,5 roku | |
|---|---|---|---|---|---|---|
padding-top: wartość | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 3.5 1998-11-18 | 1 2003-06-23 |
Komentarze
Sławomir Kokłowski05.09.2015 18:07
LB oznacza "left border", a ta gruba ciągła linia to nie samo obramowanie tylko jego krawędź. Przyzwyczailiśmy się, że obramowanie jest zwykle nie tak szerokie jak marginesy, ale przecież nie musi tak być. Taką sytuację właśnie przedstawia ilustracja.
Zobacz więcej
Wicher1305.09.2015 17:58
Z grafiki wynikia, że padding to suma padding + border (np. LP + LB) podczas gdy w rzeczistości padding to odległość między content a border. Czy zatem na grafice jest błąd?
Zobacz więcej- Gość
17.12.2013 14:02
Jest błąd do poprawienia:
"dwóch wartości - osobno dla poziomych i pionowych"
Można by zapisać w odpowiedniej kolejności, albo w nawiasie ją podać.
Dziękuje i pozdrawiam.
Zobacz więcej - Siwy
12.12.2012 21:30
Panowie jak zrobić tak że jak pomniejszam stronę do 50% to wszystko jest wyrównane do góry i odpowiednio pomniejszane od dołu i boków, mój kod to: obrazek pomniejsza się tak ja chce, a tekst pomniejsza się tylko do góry i nie odchodzi od boków
Dla porównanie zobaczcie stronę www.t2d.xaa.pl a mój...
Zobacz więcej 
Roberto09.12.2012 22:44
skorzystać nie z tabel, a div'ów
Zobacz więcej- Siwy
09.12.2012 14:51
...
Zobacz więcej - Luke
08.12.2012 19:33
Siwy: "chyba ze to trzeba jakos inaczej robic, to wtedy moglbym prosic o kod?".
To my prosimy o kod. :)
Zobacz więcej - Siwy
08.12.2012 18:18
tzn pomniejsza sie jednakowo ale wszystko do tej strony do ktorej jest przypisane, chodzi mi o o to zeby wszystko sie jednakowo pomniejszalo do srodka tak jak tutaj jest, bo u mnie jak zrobie text na prawo i obrazek na lewo to zle sie pomniejsza, potrzebuje czegos co to cala zawartosc strony...
Zobacz więcej - Luke
07.12.2012 21:55
Zwykle zmniejsza się jednakowo. Pokaż swój kod.
Zobacz więcej - Siwy
07.12.2012 21:29
jak zrobic tak ze jak sie pomniejsza strone (ctrl i + ) to cala zawartosc jednakowo sie pomniejsza?
Zobacz więcej
