Czasami zdarza mi się nadużywać dopełnień – padding

Wartość padding (podobnie zresztą jak margin) może przyjmować cztery wartości. Jednak zależnie od tego ile tych wartości ustawimy (bo równie dobrze możemy ustawić tylko jedną, tylko dwie lub tylko trzy) tak pojawi się dopełnienie. Zatem:
– jeśli ustawimy tylko jedną wartość, np:

padding: 10px

ustawi dopełnienie o wartości 10px ze wszystkich stron danego elementu.
– z kolei ustawienie dwóch wartości, np:

padding: 20px 5px

ustawi dopełnienie o wartości 20px z dołu i z góry elementu.
– ustawienie trzech wartości:

padding:5px 10px 15px

ustawi dopełnienie o wartości 5px z góry, 10px z lewej i prawej strony oraz 15px z dołu elementu
– natomiast jeśli ustawimy wszystkie cztery, to:

padding: 10px 5px 15px 20px

ustawi dopełnienie o wartości 10px z góry, 5px z prawej, 15px z dołu oraz 20px z lewej
Osobiście najczęściej używam ostatniej wersji, gdyż w niej najwygodniej dokonywać zmian. Równie dobrze jednak można używać wartości padding-top, padding-right, padding-bottom, padding-left (odpowiednio: margin-top, margin-right, margin-bottom, margin-left). Przydaje się to szczególnie wtedy, gdy potrzebujemy ustawić dopełnienie tylko z jednej konkretnej strony.

You might also like