Marginesy w CSS to potężne narzędzie do kontrolowania układu strony. Można je ustawiać indywidualnie dla każdej strony, używać skrótów, centrować elementy, a nawet stosować wartości ujemne. Ważne jest, aby pamiętać o różnicy między marginesami a paddingiem oraz o zjawisku kolapsu marginesów.

SPIS TREŚCI

• Marginesy wewnętrzne
  • Przykłady użycia padding
  • Jednostki
  • Uwagi
• Obramowanie
  • Przykłady użycia border
  • Składnia właściwości border
  • Jednostki
  • Zaokrąglone rogi
  • Uwagi
• Marginesy zewnętrzne
  • Przykłady użycia margin
  • Jednostki
  • Ujemne marginesy
  • Auto margines
  • Uwagi

Marginesy wewnętrzne

W CSS, marginesy wewnętrzne są określane za pomocą właściwości padding. Właściwość ta pozwala na ustawienie odstępu między zawartością elementu a jego granicą (border). Można ją stosować do wszystkich stron elementu (góra, prawa, dół, lewa) lub osobno dla każdej ze stron.

Przykłady użycia padding:

1. Ustawienie jednakowego paddingu ze wszystkich stron:

.element {
    padding: 20px;
}

W tym przypadku wszystkie cztery strony elementu będą miały padding o wartości 20 pikseli.

2. Ustawienie różnych wartości paddingu dla każdej strony:

.element {
    padding: 10px 20px 30px 40px;
}

Wartości są przypisywane w kolejności: góra, prawa, dół, lewa. Czyli:

• góra: 10px
• prawa: 20px
• dół: 30px
• lewa: 40px

3. Ustawienie paddingu dla dwóch wartości (pionowo i poziomo):

.element {
    padding: 15px 25px;
}

Pierwsza wartość (15px) dotyczy paddingu od góry i dołu, a druga wartość (25px) dotyczy paddingu z lewej i prawej strony.

4. Ustawienie paddingu dla jednej strony:

.element {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

Można również ustawić padding dla każdej strony osobno, używając odpowiednich właściwości:

• padding-top
• padding-right
• padding-bottom
• padding-left

Jednostki:

Wartości paddingu można podawać w różnych jednostkach, takich jak:

• piksele (px)
• procenty (%)
• em (em)
• rem (rem)

Przykład z różnymi jednostkami:

.element {
    padding: 10px 5% 2em 1rem;
}

Uwaga!

Padding jest częścią modelu pudełkowego (box model) w CSS, który składa się z: zawartości (content), paddingu (padding), obramowania (border) i marginesu (margin). Padding zwiększa rozmiar elementu, ale nie wpływa na margines zewnętrz

Jeśli chcesz, aby padding nie zwiększał rozmiaru elementu, możesz użyć właściwości box-sizing: border-box;, która powoduje, że padding i border są wliczane w szerokość i wysokość elementu.

.element {
    box-sizing: border-box;
    padding: 20px;
    width: 300px; /* Całkowita szerokość elementu będzie 300px, wliczając padding */
}

To wszystko, co musisz wiedzieć o marginesach wewnętrznych w CSS!

Obramowanie

W CSS, obramowania (borders) są określane za pomocą właściwości border. Właściwość ta pozwala na ustawienie stylu, grubości i koloru obramowania wokół elementu. Można ją stosować do wszystkich stron elementu (góra, prawa, dół, lewa) lub osobno dla każdej ze stron.

Przykłady użycia border:

1. Ustawienie jednakowego obramowania ze wszystkich stron:

.element {
    border: 2px solid black;
}

W tym przypadku wszystkie cztery strony elementu będą miały obramowanie o grubości 2 pikseli, stylu ciągłym (solid) i kolorze czarnym.

2. Ustawienie różnych wartości obramowania dla każdej strony:

.element {
    border-top: 1px dotted red;
    border-right: 2px dashed blue;
    border-bottom: 3px double green;
    border-left: 4px groove orange;
}

3. Ustawienie obramowania dla jednej strony:

.element {
    border-left: 5px solid purple;
}

W tym przypadku tylko lewa strona elementu będzie miała obramowanie o grubości 5 pikseli, stylu ciągłym (solid) i kolorze fioletowym.

Składnia właściwości border:

Właściwość border składa się z trzech wartości:

• grubość obramowania - (np. 2px)
• styl obramowania - (np. solid, dotted, dashed, double, groove, ridge, inset, outset)
• kolor obramowania - (np. black, #ff0000, rgb(255, 0, 0))

Przykład z różnymi stylami obramowania:

.element {
    border: 3px dashed #ff0000;
}

Jednostki:

Wartości grubości obramowania można podawać w różnych jednostkach, takich jak:

• piksele (px)
• em (em)
• rem (rem)

Przykład z różnymi jednostkami:

.element {
    border: 0.5em solid blue;
}

Zaokrąglone rogi:

Możesz również zaokrąglić rogi obramowania za pomocą właściwości border-radius.

.element {
    border: 2px solid black;
    border-radius: 10px;
}

Uwaga!

Obramowanie jest częścią modelu pudełkowego (box model) w CSS, który składa się z: zawartości (content), paddingu (padding), obramowania (border) i marginesu (margin). Obramowanie zwiększa rozmiar elementu, ale nie wpływa na margines zewnętrzny.

Jeśli chcesz, aby obramowanie nie zwiększało rozmiaru elementu, możesz użyć właściwości box-sizing: border-box;, która powoduje, że padding i border są wliczane w szerokość i wysokość elementu.

.element {
    box-sizing: border-box;
    border: 10px solid black;
    width: 300px; /* Całkowita szerokość elementu będzie 300px, wliczając obramowanie */
}

To wszystko, co musisz wiedzieć o obramowaniach w CSS!

Marginesy zewnętrzne

W CSS, marginesy zewnętrzne są określane za pomocą właściwości margin. Właściwość ta pozwala na ustawienie odstępu między elementem a jego otoczeniem (innymi elementami). Marginesy zewnętrzne są używane do kontrolowania przestrzeni poza granicami elementu (border). Można je stosować do wszystkich stron elementu (góra, prawa, dół, lewa) lub osobno dla każdej ze stron.

Przykłady użycia margin:

1. Ustawienie jednakowego marginesu ze wszystkich stron:

.element {
    margin: 20px;
}

W tym przypadku wszystkie cztery strony elementu będą miały margines o wartości 20 pikseli.

2. Ustawienie różnych wartości marginesu dla każdej strony:

.element {
    margin: 10px 20px 30px 40px;
}

Wartości są przypisywane w kolejności: góra, prawa, dół, lewa. Czyli:

• góra: 10px
• prawa: 20px
• dół: 30px
• lewa: 40px

3. Ustawienie marginesu dla dwóch wartości (pionowo i poziomo):

.element {
    margin: 15px 25px;
}

Pierwsza wartość (15px) dotyczy marginesu od góry i dołu, a druga wartość (25px) dotyczy marginesu z lewej i prawej strony.

4. Ustawienie marginesu dla jednej strony:

.element {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
}

Można również ustawić marginesy dla każdej strony osobno, używając odpowiednich właściwości:

• margin-top
• margin-right
• margin-bottom
• margin-left

Jednostki:

Wartości marginesu można podawać w różnych jednostkach, takich jak:

• piksele (px)
• procenty (%)
• em (em)
• rem (rem)

Przykład z różnymi jednostkami:

.element {
    margin: 10px 5% 2em 1rem;
}

Ujemne marginesy

Marginesy mogą również przyjmować wartości ujemne, co pozwala na przesuwanie elementów w kierunku przeciwnym do domyślnego.

.element {
    margin-left: -20px;
}

Auto margines

Wartość auto jest często używana do wyśrodkowania elementów poziomowo. Działa to szczególnie dobrze z elementami blokowymi o określonej szerokości.

.element {
    width: 50%;
    margin: 0 auto;
}

Uwaga!

Marginesy zewnętrzne są częścią modelu pudełkowego (box model) w CSS, który składa się z: zawartości (content), paddingu (padding), obramowania (border) i marginesu (margin). Marginesy zewnętrzne nie zwiększają rozmiaru elementu, ale wpływają na przestrzeń między elementami.

Kolapsowanie marginesów:

W CSS, pionowe marginesy sąsiednich elementów mogą się zapadać(kolapsować), co oznacza, że rzeczywisty odstęp między elementami będzie równy większemu z dwóch marginesów, a nie ich sumie.

.element1 {
    margin-bottom: 20px;
}

.element2 {
    margin-top: 30px;
}

W tym przypadku rzeczywisty odstęp między .element1 a .element2 będzie wynosił 30 pikseli, a nie 50 pikseli.

To wszystko, co musisz wiedzieć o marginesach zewnętrznych w CSS!