Właściwość padding ustawia marginesy wewnętrzne elementu (zwane również dopełnieniem).
Mówiąc inaczej, padding zarządza przestrzenią wewnątrz obramowania.
Podobnie jak w przypadku margin, właściwość padding również daje pełną dowolność w ustawianiu marginesów wewnętrznych.
padding - top, right, bottom, left
Marginesy wewnętrzne można ustawiać za pomocą pojedyńczych instrukcji
padding-toppadding-rightpadding-bottompadding-left
Marginesty wewnętrzne mogę przyjmować:
- długość - w dakich jednostkach jak px, pt, cm, itp.
- % - procent szerokości/wysokości elementu nadrzędnego
- inherit - margines będzie odziedziczony (przepisany) z elementu nadrzędnego
xxxxxxxxxx<html><head> <style> div { border: 1px solid black; background-color:lightgreen; padding-top: 80px; padding-right: 40px; padding-bottom: 80px; padding-left: 100px; } </style></head><body> <div> Ten element ma ustawione marginesy wewnętrzne. Ich wartości to górny - 80px, prawy - 40px, dolny - 80px oraz lewy - 100px. </div> </body></html>padding - właściwość skrócona
Wszystkie marginesy wewnętrzne możesz ustawić za pomocą właściwości padding. Dla przypomnienia z poprzedniej lekcji, kolejność ustawiania to (top, right, bottom, left
<html><head> <style> div { border: 1px solid black; background-color: lightgreen; padding: 80px 40px 80px 100px; } </style></head><body> <div> Ten element ma ustawione marginesy wewnętrzne. Ich wartości to górny - 80px, prawy - 40px, dolny - 80px oraz lewy - 100px. </div></body></html>padding i width - całkowita szerokość
Zwróć uwagę, że jeżeli ustawisz element width: 200px oraz padding: 0px 20px 0px 10px.
To szerokość tego elementu będzie wynosiła 230px (200px + 10px lewego dopełnienia + 20px prawego dopełnienia).
Takie zachowanie, jest domyślne i może zostać zmienione za pomocą właściwości box-sizing -
będzie to omawiane w osobnej lekcji, jednak nie musisz sobie teraz zaprzątać tym głowy.