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
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
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.