Dzisiaj omówię dwie bardzo użyteczne właściwości CSS czyli margin i padding.
Co znajdziesz w tym wpisie
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.
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.