Marginesy i wypełnienia (margin, padding)

Marginesy (margin) i wypełnienia (padding) są kluczowymi właściwościami w CSS, które pozwalają na kontrolowanie odstępów pomiędzy elementami oraz wewnątrz nich. Zrozumienie różnicy między nimi i umiejętne ich stosowanie pozwala tworzyć bardziej estetyczne i uporządkowane układy stron.

Marginesy zewnętrzne (margin)

Właściwość margin w CSS określa odstęp zewnętrzny między elementem a jego sąsiednimi elementami. Margines tworzy przestrzeń wokół elementu, ale nie wpływa na jego zawartość wewnętrzną.

/* W tym przykładzie element div będzie miał 20-pikselowy margines ze wszystkich stron, co oznacza, że odstęp między nim a innymi elementami wyniesie 20px. */
div {
    margin: 20px;
}

Ustawienie konkretnego marginesu:

• margin-top - margines z góry,
• margin-right - margines z prawej,
• margin-bottom - margines z dołu,
• margin-left - margines z lewej,

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Wypełnienia / marginesy wewnętrzne (padding)

Padding odnosi się do odstępu wewnętrznego, który tworzy przestrzeń między zawartością elementu (np. tekstem) a jego krawędzią. Wypełnienie nie wpływa na odstęp między elementem a innymi elementami, ale powiększa przestrzeń wewnątrz elementu.

Ustawienie konkretnego wypełnienia:

• padding-top - wypełnienie z góry
• padding-right - wypełnienie z prawej
• padding-bottom - wypełnienie z dołu
• padding-left - wypełnienie z lewej

/* W tym przykładzie wewnątrz elementu div zostanie dodane 15 pikseli odstępu od jego krawędzi do zawartości. */
div {
    padding: 15px;
}

Różnica między marginesem a wypełnieniem

Choć marginesy i wypełnienia mogą wyglądać podobnie, różnią się swoim zastosowaniem:

• Margines - tworzy przestrzeń na zewnątrz elementu, oddzielając go od innych elementów.
• Wypełnienie (padding) - tworzy przestrzeń wewnątrz elementu, między jego krawędzią a zawartością.

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Podsumowanie

Marginesy (margin) i wypełnienia (padding) to podstawowe narzędzia w CSS, które pozwalają zarządzać odstępami wokół i wewnątrz elementów. Właściwe ich zastosowanie ma ogromne znaczenie w projektowaniu responsywnych i przejrzystych layoutów.