Nadawanie odstępu: margin vs. padding

Właściwość padding to odstęp nadawany wewnątrz elementu, zaś margin to jest odstęp nadawany na zewnątrz niego:

margin vs. padding

W praktyce bardzo często żonglujemy użyciem tak marginesów i paddingów, gdyż nie ma pomiędzy nimi wielu znaczących różnic. No, poza drobnymi niuansami. Najlepszym przykładem takiej różnicy są pionowe marginesy, które w odróżnieniu od paddingu nakładają się na siebie, zmniejszając odstęp pomiędzy zawartościami obu divów.

Weźmy jako przykład dwa divy, ułożone jeden pod drugim. Jeżeli oba będą miały ustawione 10 pikseli paddingu, no to oznacza to, że w pionie mamy zawsze taką sytuację, że mamy zawartość górnego diva, 10 pikseli wewnętrznego odstępu, potem drugie tyle i dopiero na końcu zawartość drugiego diva:

Nachodzenie na siebie marginesów pionowych

A jeżeli byśmy użyli marginesów (również 10-cio pikselowych), to sytuacja troszkę się zmieni - zachodzi tu nakładanie się pionowych odstępów na siebie, a zatem w praktyce odstęp pomiędzy zawartościami obu divów będzie wynosić 10 pikseli, a nie 20. Podkreślam - w przypadku marginesów pionowych, nie poziomych.

Ponadto, jeżeli mielibyśmy ustawione obramowanie jakiegoś elementu, i chcielibyśmy odsunąć zawartość diva od obramowania, to nie mamy wyjścia – odstęp musi być wewnętrzny, czyli trzeba użyć paddingu. Albo kiedy mamy ustawione tło diva jako obraz i chcemy odsunąć tekst od krawędzi – również nie mamy wyjścia – zostaje padding. Natomiast to nie jest tak, że padding jest lepszy – nie, w praktyce to marginesów używa się statystycznie częściej, żeby wstawiać odstępy – aczkolwiek to zależy mocno od osoby i jej osobistych preferencji.

Konieczność użycia paddingu

Możliwe zapisy marginesu

  • Taki sam margines określony z wszystkich stron
  • 
     margin: 10%; 
    
  • Zapis podwójny: najpierw margines górny i dolny, potem lewy i prawy
  • 
     margin: 20px 10px;  
    
  • Zapis potrójny: najpierw margines górny, potem lewy i prawy (ten sam), a na końcu podajemy wartość marginesu dolnego
  • 
     margin: 20px 5% 5px; 
    
  • 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 (subatrybuty left, right, top, bottom)
  • 
     margin-left: 5px;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 20px;

Możliwe zapisy paddingu (analogiczne)

  • Taki sam padding określony z wszystkich stron
  • 
     padding: 10%;
    
  • Zapis podwójny: najpierw padding górny i dolny, potem lewy i prawy
  • 
     padding: 20px 15px; 
    
  • Zapis potrójny: najpierw padding górny, potem lewy i prawy (ten sam), a na końcu podajemy wartość dolnego paddingu
  • 
     padding: 15px 30px 50px;
    
  • Zapis poczwórny: padding górny, prawy, dolny, lewy (zgodnie z ruchem wskazówek zegara)
  • 
     padding: 10px 15px 20px 5px; 
    
  • Padding z jednej, wybranej strony (subatrybuty left, right, top, bottom)
  • 
     padding-left: 5px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 20px;

Jak widać możliwe zapisy paddingu są analogiczne jak możliwe zapisy marginesów – to dobra wiadomość – zapamiętanie przyjętej konwencji dla odstępów wewnętrznych automatycznie sprawia, iż znamy także zapisy odstępów zewnętrznych.

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z innych kategorii blogowych aniżeli ta, którą właśnie przeglądasz:

Polecamy: Sekurak Academy 2024

Sekurak Academy 2024

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.

Książka: Wprowadzenie do bezpieczeństwa IT

Wprowadzenie do bezpieczeństwa IT

Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

Pomóż dzieciom

Polska Akcja Humanitarna od wielu lat dożywia dzieci. Proszę, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękuję!

Komentarze

Disqus

Kategorie wpisów

Oto polecana książka warta Waszej uwagi.
Pełna lista polecanych książek jest tutaj.

Uwaga - w dniach od 18.03.2024 do 25.03.2024 trwa w Helion.pl wiosenna akcja promocyjna. Otrzymujemy zniżkę -35% na książki drukowane oraz -50% na ebooki. Zobacz promocję tutaj.

Bądź na bieżąco