Nadawanie odstępu: margin i padding [CSS]

Dzisiaj omówię dwie bardzo użyteczne właściwości CSS czyli margin i padding.

Czym jest margin i padding?

Pierwsza z nich margin określa odstęp nadawany na zewnątrz elementu (kontenera) HTML, z kolei padding określa odstęp nadawany w jego zewnętrzu.

Przykład:

See the Pen padding i margin by Aura (@Julka85) on CodePen.

W celu lepszego zobrazowania działania w przykładzie zastosowałam dwa zagnieżdżone elementy blokowe HTML. A tak trochę bardziej po ludzku umieściłam element div w innym div. W ten sposób uzyskałam ograniczoną przestrzeń w której mogę zaprezentować działanie.

Opis przykładu:

Do pierwszego prostokąta nie został dodany żaden pading czy margin. Są to jak widać przylegające do siebie elementy div. Nie widać więc, że zewnętrzny prostokąt ma inny kolor.

W drugim przypadku do obiektu został dodany margin (margines) o wielkości 7px. W efekcie obiekt w środku zmniejszył swoje rozmiary na zewnątrz. Doprowadziło to do pojawienia się warstwy w szarym kolorze. Teraz między oboma elementami jest odstęp właśnie wielkości 7px.

W trzecim przykładzie użyto padding. Tym razem prostokąt się nie zmniejszył ale uległa zmiana wielkości pola tekstowego. Tekst odsunął się od ramki o 7px.

Przykładowe 2 obiekty z właściwością margin

Przykładowe 2 obiekty z właściwością padding

Działanie na margin

Istnieje kilka sposobów zapisywania właściwości margin:

Wszystkie marginesy będą miały wartość 7px;

margin: 7px;
margin: 7px 7px;
margin: 7px 7px 7px 7px;

---

Wszystkie margines górny i dolny będą miały wartość 7px; a prawy i lewy 3px

margin: 7px 3px;

---

Wszystkie marginesy będą miały wartość: 7px górny, 3px prawy i lewy, 4px dolny

margin: 7px 3px 4px;

---

Wszystkie marginesy będą miały wartość: 7px górny, 3px prawy, 4px dolny, 6px lewy

margin: 7px 3px 4px 6px;

---

Zapis poczwórny: margines górny, prawy, dolny, lewy (zgodnie z ruchem wskazówek zegara)

margin: 10px 15px 20px 5px;  

---

Margines z jednej, wybranej strony atrybuty left (lewy), right (prawy), top (góra), bottom (dół)

 margin-left: 7px;
 margin-right: 7px;
 margin-top: 7px;
 margin-bottom: 7px; 

Działanie na padding

Padding posiada analogiczny sposób zapisu jak margin a więc:

Wszystkie paddingi będą miały wartość 7px;

margin: 7px;
margin: 7px 7px;
margin: 7px 7px 7px 7px;

---

Wszystkie paddingi górny i dolny będą miały wartość 7px; a prawy i lewy 3px

margin: 7px 3px;

---

Wszystkie paddingi będą miały wartość: 7px górny, 3px prawy i lewy, 4px dolny

margin: 7px 3px 4px;

---

Wszystkie paddingi będą miały wartość: 7px górny, 3px prawy, 4px dolny, 6px lewy

margin: 7px 3px 4px 6px;

---

Zapis poczwórny: padding górny, prawy, dolny, lewy (zgodnie z ruchem wskazówek zegara) analogicznie jak powyżej

margin: 10px 15px 20px 5px;  

Padding z jednej, wybranej strony atrybuty left (lewy), right (prawy), top (góra), bottom (dół)

 margin-left: 7px;
 margin-right: 7px;
 margin-top: 7px;
 margin-bottom: 7px; 

Jak widzicie korzystanie z obu właściwości jest bardzo proste i nie wymaga specjalnie dużej wiedzy.

Jakie wartości mogą przyjmować

W powyższych przykładach użyłam parametrów opisanych w pikselach (px, pixel) można jednak spokojnie stosować wartości w procentach (%) czy w innej jednostce np. cm, mm, in, pt i pc.