Marginesy i dopełnienia w CSS

Przeglądając arkusze stylów na różnych stronach internetowych z pewnością widzieliście różnie zapisane wartości właściwości margin i padding (dopełnienie – margines wewnętrzny). Poniżej przedstawiam kilka przykładów zapisu tych dwóch właściwości.
Zamiast pisać w arkuszu stylów całą serię właściwości dla każdego marginesu osobno:
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
lub analogicznie dla dopełnień
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
można sobie uprościć życie (skrócić czas pracy) i zapisać to prościej:
margin: 20px;
lub dla dopełnień
padding: 20px;
taki zapis oznacza ustawienie wszystkich czterech marginesów elementu na tę samą wielkość.
Używanie rozbudowanych zapisów typu margin-bottom ma sens wtedy, gdy chcemy zdefiniować wyłacznie ten jeden margines, nie zajmując się w ogóle pozostałymi.
Jeśli jednak chcielibyśmy zdefiniować marginesy lub dopełnienia inne z każdej strony, wcale nie jesteśmy zmuszeni sięgać po rozbudowany zapis. To też da się przedstawić w formie skróconej:
margin: 20px 0 30px 25px;
padding: 20px 0 30px 25px;

Zapis z czterema wartościami reguluje odległości (marginesy lub dopełnienia) dla czterech boków kształtu. Pierwsza liczba wskazuje wielkość marginesu/dopełnienia górnego, druga – prawego, trzecia – dolnego, czwarta – lewego. Zgodnie z ruchem wskazówek zegara. Nie jest błędem pozostawienie wartości 0 bez jednostki. Wielkość 0 jest przecież taka sama niezaleznie od jednostki 😉
Zapis z trzema liczbami też jest całkowicie poprawny:
margin: 20px 10px 30px;
lub
padding: 20px 10px 30px;
Trzy liczby oznaczają cztery wartości 🙂 Pierwsza liczba definiuje margines/padding górny. Druga – prawy i lewy jednocześnie. A trzecia – dolny.
I jeszcze jedna forma zapisu:
margin: 0 20px;
margin: 0 auto;
padding: 0 20px;

Użycie tylko dwóch wartości oznacza, że pierwsza wartość definiuje margines/padding górny i dolny jednocześnie. Druga wartość opisuje margines/padding lewy i prawy jednocześnie.
Wartość auto wykorzystywana jest dość często przy budowaniu układów stron. Jeżeli chcemy jakiś element blokowy o zdefiniowanej stałej szerokości umieścić dokładnie na środku szerokości ekranu – wystarczy wartość auto dla marginesu lewego i prawego. Obydwa marginesu przyjmą jednakową szerokość, a element „wyląduje” dokładnie na środku.