Marginesy

W tym rozdziale dowiesz się...

Model pudełkowy

Ilustracja związku pomiędzy zawartością, marginesem wewnętrznym, obramowaniem i marginesami.

Źródło: Cascading Style Sheets, Level 2

Każdy element generuje w dokumencie prostokątny obszar zwany pudełkiem (ang. Box model). Pudełko składa się z:

  1. Zawartości - "Content" (np. test, obrazek itd.)
  2. Otaczających marginesów wewnętrznych - "Padding"
  3. Obramowania - "Border"
  4. Marginesów - "Margin"

Ostatnie trzy składniki są opcjonalne, tzn. mogą mieć wartość zero.

Obwód (zewnętrzny) każdego z czterech obszarów nazywamy krawędzią ("Edge"). Według CSS rozmiary elementu (własności width oraz height) odnoszą się do samej zawartości ("Content") i nie wpływają na pozostałe obszary modelu pudełkowego ("Box model"), które są tworzone na zewnątrz zawartości, ale wewnątrz pudełka. Natomiast tło elementu jest określone dla wszystkich z podanych powyżej obszarów z wyjątkiem marginesów zewnętrznych, które zawsze są przezroczyste ("Transparent"). Zapamiętanie tych krótkich zasad pozwoli Ci uniknąć w przyszłości nieoczekiwanych problemów z wyświetlaniem elementów strony.

UWAGA! W trybie Quirks interpretacja modelu pudełkowego różni się od przedstawionej powyżej i jest niezgodna z CSS 2.

Wymiarowanie pudełka

(CSS 3 - interpretuje Internet Explorer 8, Firefox 29, Opera, Chrome)

selektor { box-sizing: rodzaj }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "rodzaj" należy podać:
content-box
Wymiarowanie zgodne z modelem pudełkowym
border-box
Wymiarowanie zgodne z trybem Quirks

Starsze przeglądarki - w czasach MSIE 5 - nie potrafiły wymiarować bloków zgodnie ze specyfikacją CSS. Sytuacja ta uległa zmianie w momencie pojawienia się MSIE 6. Jednak w celu zachowania kompatybilności wstecz, niektórzy producenci przeglądarek zdecydowali się na wprowadzenie w swoich nowych produktach trybu niezupełnej zgodności ze standardami - Quirks. Twórcy serwisów WWW, które powstawały dawno temu, a nadal funkcjonują w sieci, mogą chcieć wymusić wyświetlanie ich według dawnego sposobu interpretacji, aby nadal prezentowały się poprawnie.

Warto zauważyć, że przy wymiarowaniu "border-box" miejsce na faktyczną zawartość treści w elemencie kurczy się w miarę dodawania marginesów wewnętrznych oraz obramowania. Może się zdarzyć zatem, że na właściwą zawartość w ogóle już nie wystarczy miejsca. Nie jest możliwe natomiast, aby właściwa zawartość treści elementu miała wartość ujemną.

Używanie deklaracji "box-sizing: border-box" na nowych stronach raczej nie jest zalecane, gdyż może wprowadzić spore zamieszanie przy późniejszej rozbudowie serwisu.

Przykład:

wymiarowanie domyślne ("width: 300px")

"box-sizing: content-box" ("width: 300px")

"box-sizing: border-box" ("width: 300px")

wymiarowanie domyślne - bez obramowania ani marginesu wewnętrznego ("width: 300px")

Górny

selektor { margin-top: rozmiar }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "rozmiar" należy podać konkretną wartość w jednostkach długości. Wpisanie auto ustali wartość automatyczną.

Polecenie wprowadza dodatkowy odstęp między danym elementem a elementem poprzedzającym.

Jeśli definiowane własności mają odnosić się do całej strony (np. marginesy strony), można użyć selektora BODY (zobacz także: Marginesy wewnętrzne).

Przykład:

To jest pierwszy akapit...

...a to jest następny akapit z górnym marginesem margin-top: 2cm. Dlatego odstęp pomiędzy nimi wynosi 2cm.

Dolny

selektor { margin-bottom: rozmiar }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "rozmiar" należy podać konkretną wartość w jednostkach długości. Wpisanie auto ustali wartość automatyczną.

Polecenie wprowadza dodatkowy odstęp między danym elementem a następnym elementem.

Przykład:

To jest pierwszy akapit z dolnym marginesem margin-bottom: 2cm...

...a to jest następny akapit. Dlatego odstęp pomiędzy nimi wynosi 2cm.

Lewy

selektor { margin-left: rozmiar }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "rozmiar" należy podać konkretną wartość w jednostkach długości. Wpisanie auto ustali wartość automatyczną.

Komenda pozwala wprowadzić lewy margines dla danego elementu, a więc np. dodatkową odległość od lewego brzegu strony.

Przykład:

To jest akapit z lewym marginesem margin-left: 4cm i dlatego jest oddalony od lewej krawędzi strony o 4cm.

Prawy

selektor { margin-right: rozmiar }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "rozmiar" należy podać konkretną wartość w jednostkach długości. Wpisanie auto ustali wartość automatyczną.

Komenda pozwala wprowadzić prawy margines dla danego elementu, a więc np. dodatkową odległość od prawego brzegu strony.

Przykład:

To jest akapit z prawym marginesem margin-right: 4cm i dlatego jest oddalony od prawej krawędzi strony o 4cm.

Atrybuty mieszane

selektor { margin: wartości atrybutów }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "wartości atrybutów" należy podać:
  1. Jedną wartość - wtedy wszystkie marginesy będą jednakowe.

    Przykład:

    To jest akapit, który ma wszystkie marginesy równe 2cm (margin: 2cm)

  2. Dwie wartości - z których pierwsza oznacza górny i dolny margines, natomiast druga - lewy i prawy.

    Przykład:

    To jest akapit, który ma górny i dolny margines równy 2cm, a lewy i prawy 1cm (margin: 2cm 1cm)

  3. Trzy wartości - z których pierwsza oznacza górny margines, druga - jednocześnie lewy i prawy, a ostatnia - dolny.

    Przykład:

    To jest akapit, który ma górny margines równy 2cm, lewy i prawy 1cm, a dolny 3cm (margin: 2cm 1cm 3cm)

  4. Cztery wartości - które oznaczają kolejno marginesy: górny, prawy, dolny, lewy.

    Przykład:

    To jest akapit, który ma następujące marginesy: górny 2cm, prawy 5mm, dolny 3cm, lewy 1cm (margin: 2cm 5mm 3cm 1cm)

We wszystkich przypadkach wartości należy podać, korzystając z jednostek długości.

Załamywanie marginesów

W przypadku sąsiadowania ze sobą lub zagnieżdżania wewnątrz siebie elementów posiadających marginesy, może zajść proces załamywania marginesów zewnętrznych (ang. collapsing margins), polegający na połączeniu kilku sąsiadujących odstępów w jeden o rozmiarze pojedynczego marginesu, a nie sumy składowych. Według CSS 2.1 załamywane mogą być tylko marginesy pionowe w następujących przypadkach:

  1. Dwa lub więcej sąsiadujące marginesy pionowe bloków bez "oblewania" (float) zostają załamane. Wynikowy margines ma wysokość najwyższego z załamywanych marginesów składowych i jest on zawsze dodatni lub równy zero, nawet w przypadku ujemnych wartości marginesów składowych.
  2. Pionowe marginesy pomiędzy elementami z ustawionym "oblewaniem" (float) a dowolnymi innymi elementami nigdy nie są załamywane.
  3. Pionowe marginesy elementów z przepełnieniem (overflow) innym od visible nie są załamywane z ich dziećmi.
  4. Marginesy elementów pozycjonowanych absolutnie (wg CSS 2 również relatywnie) nie są załamywane.
  5. Marginesy elementów inline-block nie są załamywane.
  6. Jeżeli marginesy - górny i dolny - sąsiadujących elementów zostaną załamane, pozycja elementu jest wyznaczana w następujący sposób:
    • Jeśli marginesy elementu zostały załamane z górnym marginesem rodzica, górna krawędź obramowania jest taka sama jak dla rodzica.
    • Jeśli rodzic nie bierze udziału w załamywaniu marginesów lub tylko dolny margines jest załamywany, pozycja górnej krawędzi obramowania elementu jest taka sama, jakby element miał niezerowe górne obramowanie.
    Element który ma ustawione przyleganie nigdy nie załamuje górnego marginesu z dolnym marginesem jego rodzica.
    Należy zauważyć, że załamywanie marginesów wpływa tylko na pozycję potomków, a nie wpływa na ustawienie przodka.
  7. Marginesy elementu podstawowego ("root") - czyli nadrzędnego dla wszystkich - nie są załamywane.

Trzeba wyraźnie rozróżnić, że proces załamywania dotyczy tylko i włącznie pionowych marginesów zewnętrznych, a nie wewnętrznych (padding).

Przykład:

Po wpisaniu następującego kodu:
<div style="margin-bottom: 20px">1</div>
<div style="margin-top: 50px">2</div>
na ekranie zobaczymy dwa bloki, pomiędzy którymi margines będzie wynosił 50px, a nie 70px (nie suma).

Górny wewnętrzny

selektor { padding-top: rozmiar }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "rozmiar" należy podać konkretną wartość w jednostkach długości.

Polecenie to pozwala zdefiniować dodatkowy wewnętrzny odstęp pomiędzy elementami, np. tekstem i obramowaniem tabeli (co nie byłoby możliwe poprzez ustalenie marginesu - margin). Jest przydatne np. w połączeniu z tłem pod tekstem, obramowaniem, czy też tabelami.

W przeglądarce Opera każda strona posiada domyślnie ustalone niezerowe marginesy wewnętrzne. Jeżeli chcemy je zlikwidować, należy do selektora BODY przypisać następujący styl:
body { padding: 0 }

Przykład:

Tekst w tej komórce tabeli jest oddalony od górnego brzegu obramowania o 1cm (padding-top: 1cm)

Rzeczywiście w wielu przypadkach, praktycznie nie można ich odróżnić, np.:

Dla tego akapitu został określony margines wewnętrzny po lewej stronie, który wygląda tak samo, jak zwykły margines (margin).

Aby zrozumieć, jaka jest różnica pomiędzy zwykłym a wewnętrznym marginesem, spójrz na poniższy przykład:

Po wpisaniu:
<p style="background-color: silver; margin: 1cm; padding: 5mm">...</p>
Otrzymamy:

To jest akapit z określonym marginesem zewnętrznym - 1cm (to ta odległość między brzegami strony (także sąsiadującymi elementami) a zewnętrznymi krawędziami szarego prostokąta). Natomiast margines wewnętrzny wynosi 5mm (to ta odległość między krawędziami szarego prostokąta a tekstem, który właśnie czytasz). Margines zewnętrzny leży na zewnątrz elementu (na zewnątrz szarego prostokąta), a margines wewnętrzny - wewnątrz.

To jest analogiczny przykład, ale z użyciem obramowania.

Dla porównania - to jest akapit z tłem, ale bez określenia marginesu wewnętrznego. Dlatego właśnie nie istnieje tutaj odstęp między szarym prostokątem a tekstem, który właśnie czytasz.

A to jest zwykły akapit z tłem, bez określenia jakichkolwiek marginesów. Dlatego jego szerokość wynosi tyle co zwykłego tekstu, a także wewnątrz elementu (prostokąta) nie ma żadnego odstępu.

Dolny wewnętrzny

selektor { padding-bottom: rozmiar }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "rozmiar" należy podać konkretną wartość w jednostkach długości.

Przykład:

Tekst w tej komórce tabeli jest oddalony od dolnego brzegu obramowania o 1cm (padding-bottom: 1cm)

Lewy wewnętrzny

selektor { padding-left: rozmiar }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "rozmiar" należy podać konkretną wartość w jednostkach długości.

Przykład:

Tekst w tej komórce tabeli jest oddalony od lewego brzegu obramowania o 2cm (padding-left: 2cm)

Prawy wewnętrzny

selektor { padding-right: rozmiar }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "rozmiar" należy podać konkretną wartość w jednostkach długości.

Przykład:

Tekst w tej komórce tabeli jest oddalony od prawego brzegu obramowania o 2cm (padding-right: 2cm)

Atrybuty mieszane marginesu wewnętrznego

selektor { padding: wartości atrybutów }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast zasady wpisywania "wartości atrybutów" są takie same jak przy atrybutach mieszanych zwykłego marginesu.

Pozwala wprowadzić jednocześnie kilka wartości marginesów wewnętrznych. Możliwe jest przy tym podanie:

  • jednej wartości - dla wszystkich marginesów wewnętrznych naraz
  • dwóch wartości - osobno kolejno dla marginesów: pionowych i poziomych
  • trzech wartości - pierwsza określa górny margines wewnętrzny, druga - jednocześnie oba poziome (lewy i prawy), a ostatnia - dolny
  • czterech wartości - osobno dla kolejnych marginesów (górny prawy dolny lewy)

Przykład:

Tekst w tej komórce tabeli jest oddalony od wszystkich brzegów obramowania o 1cm (padding: 1cm)

Tekst w tej komórce tabeli jest oddalony od górnego i dolnego brzegu obramowania o 2cm, a od lewego i prawego - o 1cm (padding: 2cm 1cm)

Tekst w tej komórce tabeli jest oddalony od górnego brzegu obramowania o 2cm, od lewego i prawego - o 1cm, a od dolnego - o 3cm (padding: 2cm 1cm 3cm)

Tekst w tej komórce tabeli ma następujące marginesy wewnętrzne: górny 2cm, prawy 5mm, dolny 3cm, lewy 1cm (padding: 2cm 5mm 3cm 1cm)