Zarówno margin jak i padding są właściwościami CSS, które ustalają przesunięcie danego elementu. Trzeba jednak wiedzieć kiedy użyć pierwszej, a kiedy drugiej właściwości. Jaka jest więc różnica między nimi?

Zacznijmy więc od podstaw. Zobacz obrazek poniżej

Jak widać na powyższym rysunku margin i padding różnią się przede wszystkim umiejscowieniem w strukturze. Pomiędzy nimi znajduje się border, czyli obramowanie elementu. Podstawowym wyborem jest teraz to czy chcesz oddzielić dwa elementy od siebie, czy np. oddzielić obramowanie od tekstu. Jeśli chcesz oddzielić dwa elementy od siebie prawie zawsze należy używać marginesu. Jeśli natomiast chcesz odsunąć tekst od obramowania czy krańca elementu (widocznego np. za pomocą innego koloru tła) użyj właściwości padding.

Kiedy jeszcze warto użyć padding? Istnieją przede wszystkim dwa takie przypadki. Wyobraź sobie sytuację w której nie znasz szerokości elementu - rodzica (lub np. tworzysz stronę wspierającą urządzenia mobilne) i chciałbyś utworzyć 4 kolumny, w których umieścisz jakiś tekst. Nie chciałbyś jednak żeby kolumny przylegały do siebie. Warto wtedy użyć właściwości padding razem z box-sizing: border-box;. Wtedy w prosty sposób każdej z kolumn możesz ustalić szerokość na 25% i padding na 15px. Dzięki temu nie musisz się martwić i obliczać marginesów i szerokości. Każda z kolumn będzie posiadać szerokość równą 25%, a pomiędzy tekstem z dwóch kolumn mieszczących się obok siebie będziesz miał przerwę 2 * 15px, czyli 30px. Według powyższych obliczeń sam tekst w każdej z kolumn będzie zajmował 25% szerokości rodzica - 30px.

Drugim z przypadków są linki, które mają zostać ostylowane tak, by wyglądały jak przycisk. Element <a> jest domyślnie wyświetlany razem z tekstem, posiada więc zatem parametr display z wartością inline. Możemy jednak zmienić wartość na block i dodać tło dla linku. Mamy już link z tłem. Nie wygląda to jednak nadal na przycisk, więc warto dodać dla elementu <a> padding o wartości np. 5px 30px. Dzięki takiemu zabiegowi otrzymamy element <a> ostylowany jak przycisk, który jest klikalny na całej jego powierzchni. Gdybyśmy w tym przypadku użyli właściwości margin, nie dałoby nam to takiego efektu. Otrzymalibyśmy nadal link z tłem który byłby odsunięty od treści o podane wartości, a nie to było naszym celem.

Podsumowując, jeśli chcemy odsunąć dwa element od siebie, domyślnie używamy właściwości margin. Padding używamy przede wszystkim wtedy, gdy chcemy ustawić przestrzeń między zawartością danego elementu, a obramowaniem czy tłem. Pamiętaj też, że element który posiada border lub background prawie zawsze powinien posiadać padding, dla lepszej czytelności strony.