Odstępy CSS – Margin, Padding

Z pewnością wśród wielu właściwości CSS, które można używać do formatowania strony, kluczowe znaczenie mają odstępy CSS, w tym margin (marginesy) i padding (dopełnienie). Przede wszystkim obie te właściwości kontrolują przestrzeń wokół elementów na stronie internetowej, ale działają na różne sposoby. Dlatego zrozumienie różnicy między nimi i nauczenie się, jak je poprawnie stosować, jest kluczowe dla tworzenia dobrze wyglądających i funkcjonalnych stron internetowych.

Różnica między Margin i Padding

• Margin (Margines) – Przestrzeń na zewnątrz elementu, oddzielająca go od innych elementów.
• Padding (Dopełnienie) – Przestrzeń wewnątrz elementu, oddzielająca jego zawartość od jego krawędzi.

Oba te właściwości są częścią modelu pudełkowego (box model), który jest podstawą rozmieszczania elementów w CSS.

Model pudełkowy (Box Model)

Model pudełkowy w CSS opisuje sposób, w jaki przeglądarki obliczają szerokość i wysokość elementów. Co więcej każdy element na stronie internetowej jest traktowany jak prostokątne pudełko z czterema warstwami:

1. Content (treść) – Zawartość elementu, np. tekst lub obraz.
2. Padding (dopełnienie) – Przestrzeń wokół treści, wewnątrz granic elementu.
3. Border (obramowanie) – Linia otaczająca padding i treść.
4. Margin (margines) – Przestrzeń na zewnątrz obramowania, oddzielająca element od innych elementów.

Ilustracja modelu pudełkowego:

+-------------------------------+
|           Margin              |
|  +-------------------------+  |
|  |        Border           |  |
|  |  +-------------------+  |  |
|  |  |     Padding       |  |  |
|  |  | +-------------+   |  |  |
|  |  | |  Content    |   |  |  |
|  |  | +-------------+   |  |  |
|  |  +-------------------+  |  |
|  +-------------------------+  |
+-------------------------------+

Margin (margines)

Przede wszystkim margines to przestrzeń na zewnątrz granic elementu, która oddziela go od innych elementów.

Składnia

Można ustawić margines dla każdego boku elementu osobno:

margin-top: wartość;
margin-right: wartość;
margin-bottom: wartość;
margin-left: wartość;

Lub można użyć skróconej składni:

element { 
  margin: wartość-góra wartość-prawa wartość-dół wartość-lewa; 
}

Jeśli użyjemy mniej niż czterech wartości w skróconej składni, przeglądarka zastosuje następujące zasady:

• Jedna wartość – Ustawia margines dla wszystkich stron: { margin: wartość; }
• Dwie wartości – Pierwsza wartość dla góry i dołu, druga wartość dla prawej i lewej strony: { margin: wartość wartość; }
• Trzy wartości – Pierwsza wartość dla góry, druga dla prawej i lewej, trzecia dla dołu: { margin: wartość wartość wartość; }

Przykłady

Margines dla wszystkich stron:

element {
  margin: 20px;
}

Różne marginesy dla góry, prawej, dołu i lewej strony:

element {
  margin: 20px 10px 30px 5px;
}

Automatyczne centrowanie poziome:

element {
  margin: 0 auto;
}

Padding (dopełnienie)

Dopełnienie to przestrzeń wewnątrz elementu, oddzielająca jego zawartość od granic elementu.

Składnia

Można ustawić dopełnienie dla każdego boku elementu osobno:

padding-top: wartość;
padding-right: wartość;
padding-bottom: wartość;
padding-left: wartość;

Lub można użyć skróconej składni:

element { 
  padding: wartość-góra wartość-prawa wartość-dół wartość-lewa; 
}

Przykłady

Dopełnienie dla wszystkich stron:

element {
  padding: 20px;
}

Różne dopełnienie dla góry, prawej, dołu i lewej strony:

element {
  padding: 20px 10px 30px 5px;
}

Jednostki wartości

Wartości dla margin i padding mogą być podane w różnych jednostkach, takich jak:

• px (piksele) – Najczęściej używana jednostka.
• em – Jednostka względna oparta na rozmiarze czcionki elementu.
• % (procenty) – Względne do szerokości elementu nadrzędnego.

Zastosowanie marginesów i dopełnień

Oddzielanie Elementów

Marginesy są często używane do oddzielania elementów od siebie, tworząc przestrzeń między nimi.

.element {
  margin-bottom: 20px;
}

Wyrównywanie Tekstu

Dopełnienie może być używane do wyrównywania tekstu wewnątrz elementu, zapewniając, że tekst nie dotyka bezpośrednio granic elementu.

.element {
  padding: 10px;
}

Przykład praktyczny zastosowania marginesów i dopełnień

Oto przykład zastosowania margin i padding w praktyce.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Margin i Padding</title>
  <style>
    .container {
      width: 80%;
      margin: 0 auto;
      padding: 20px;
      background-color: #f4f4f4;
      border: 1px solid #ccc;
    }
    
    .box {
      background-color: #ddd;
      margin-bottom: 20px;
      padding: 15px;
      border: 1px solid #bbb;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Pierwszy element</div>
    <div class="box">Drugi element</div>
    <div class="box">Trzeci element</div>
  </div>
</body>
</html>

W powyższym przykładzie container ma ustalone marginesy i dopełnienia, aby był wycentrowany na stronie i miał odpowiednie odstępy wewnątrz. Każdy box ma margines na dole, aby oddzielać go od innych pudełek oraz dopełnienie, aby tekst nie dotykał bezpośrednio jego krawędzi.

Odstępy CSS – podsumowanie

Podsumowując margin i padding to kluczowe właściwości CSS, które pozwalają kontrolować odstępy wokół i wewnątrz elementów. Z pewnością zrozumienie różnic między nimi i umiejętne ich stosowanie jest kluczowe dla tworzenia uporządkowanych i funkcjonalnych stron internetowych. Pamiętaj, aby eksperymentować z różnymi wartościami i jednostkami, aby uzyskać pożądane efekty wizualne.