Marginesy

W tym rozdziale dowiesz się...

• Jakie są zasady obliczania faktycznych rozmiarów elementów na stronach WWW? Jakie są najczęstsze pułapki?
• Jak zmienić zasady obliczania faktycznych rozmiarów elementów na stronach WWW?
• Jak ustawić górny margines dowolnego elementu?
• Jak ustawić dolny margines dowolnego elementu?
• Jak ustawić lewy margines dowolnego elementu?
• Jak ustawić prawy margines dowolnego elementu?
• Jak ustawić jednocześnie wszystkie marginesy dla dowolnego elementu: górny, prawy, dolny, lewy?
• Jak zachowują się marginesy sąsiadujących ze sobą elementów?
• Jak dodać górny margines (odstęp) wewnątrz dowolnego elementu?
• Jak dodać dolny margines (odstęp) wewnątrz dowolnego elementu?
• Jak dodać lewy margines (odstęp) wewnątrz dowolnego elementu?
• Jak dodać prawy margines (odstęp) wewnątrz dowolnego elementu?
• Jak ustawić jednocześnie wszystkie marginesy wewnątrz dowolnego elementu (odstępy): górny, prawy, dolny, lewy?

Model pudełkowy

Ź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 }

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 }

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 }

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 }

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 }

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 }

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:

<div style="margin-bottom: 20px">1</div>
<div style="margin-top: 50px">2</div>

Górny wewnętrzny

selektor { padding-top: rozmiar }

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 ostatnim przypadku, działanie tego polecenia jest analogiczne jak atrybutu cellpadding="...", ale dodatkowo pozwala określić odstępy od każdego brzegu komórki z osobna (które nie muszą być jednakowe), a także dla każdej oddzielnej komórki.

body { padding: 0 }

Przykład:

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:

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

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 }

Przykład:

Lewy wewnętrzny

selektor { padding-left: rozmiar }

Przykład:

Prawy wewnętrzny

selektor { padding-right: rozmiar }

Przykład:

Atrybuty mieszane marginesu wewnętrznego

selektor { padding: wartości atrybutów }

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:

• Tło
• Obramowanie

• Do góry
• Strona główna