W CSS 1 istnieje prosty mechanizm zwany modelem formatowania blokowego, który zakłada, że każdy element reprezentowany jest w postaci jednego lub więcej prostokątnych bloków (elementy z wartością none dla własności display nie są w ogóle formatowane, w związku z czym nie występują jako bloki). Każdy blok składa się z właściwej treści oraz opcjonalnie towarzyszących mu dopełnienia (padding) i marginesów (margin).

 _______________________________________
|           margines                    |
|            (przezroczysty)            |
|   _________________________________   |
|  |                                 |  |
|  |        krawędź                  |  |
|  |   ___________________________   |  |
|  |  |                           |  |  |
|  |  |     dopełnienie           |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |  zawartość          |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|
          |    szerokość elementu |
|               szerokość bloku         |

Rozmiar marginesów zewnętrznych, marginesów wewnętrznych oraz ramek ustawia się odpowiednio przy pomocy atrybutów: margin 5.5.1-5.5.5, padding 5.5.6-5.5.10 oraz border 5.5.11-5.5.22. Obszar zajmowany przez dopełnienie przyjmuje tło (ustawione przy pomocy atrybutów tła 5.3.2-5.3.7) takie samo jak element, dla którego zostało zdefiniowane. Kolor i styl ramek ustalane są przy pomocy odpowiednich atrybutów CSS. Marginesy są zawsze przezroczyste.

Rozmiar całego bloku jest sumą szerokości elementu (tj. tekstu który zawiera lub obrazka), marginesów, dopełnienia oraz ramek.

Z punktu widzenia formatera istnieją dwa typy elementów: elementy blokowe i elementy śródliniowe.

4.1 Elementy blokowe

Elementy z atrybutem display ustawionym na block lub list-item są elementami blokowymi. Do elementów blokowych zalicza się również elementy pływające (floating elements), czyli elementy których wartość atrybutu float jest różna od none.

Poniższy przykład ilustruje sposób formatowania elementu UL z dwoma elementami potomnymi przy obecności dopełnienia i marginesów. Dla uproszczenia pominięto ramki. Litery zastosowane jako wartości nie są prawidłowymi wartościami w CSS1, ale ich zastosowanie pozwala na przedstawienie relacji pomiędzy arkuszem stylów a obrazkiem w sposób bardziej przejrzysty.

<STYLE TYPE="text/css">
  UL {
    background: red;
    margin: A B C D;
    padding: E F G H;
  }
  LI {
    color: white;
    background: blue;     /* biały tekst na niebieskim tle */
    margin: a b c d;
    padding: e f g h;
  }
</STYLE>

<UL>
  <LI>pierwszy element listy
  <LI>drugi element listy
</UL>

 _______________________________________________________
|                                                       |
|    A     margines UL (przezroczysty)                  |
|    _______________________________________________    |
| D |                                               | B |
|   |    E   dopełnienie UL(czerwone)               |   |
|   |    _______________________________________    |   |
|   | H |                                       | F |   |
|   |   |    a   margines LI (przezroczysty     |   |   |
|   |   |        prześwituje kolor czerwony)    |   |   |
|   |   |    _______________________________    |   |   |
|   |   | d |                               | b |   |   |
|   |   |   |  e dopełnienie LI (niebieskie)|   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   | h  pierwszy element listy   f |   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   |    g                          |   |   |   |
|   |   |   |_______________________________|   |   |   |
|   |   |                                       |   |   |
|   |   |     max(a, c)                         |   |   |
|   |   |    _______________________________    |   |   |
|   |   |   |                               |   |   |   |
|   |   | d |  e dopełnienie LI (niebieskie)|   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   | h  Drugi element listy      f |   |   |   |
|   |   |   |                               |   |   |   |
|   |   |   |    g                          |   |   |   |
|   |   |   |_______________________________|   |   |   |
|   |   |                                       |   |   |
|   |   |   c  margines LI (przezroczysty,      |   |   |
|   |   |        prześwituje kolor czerwony)    |   |   |
|   |   |_______________________________________|   |   |
|   |                                               |   |
|   |    G                                          |   |
|   |_______________________________________________|   |
|                                                       |
|   C                                                   |
|_______________________________________________________|

Technicznie rzecz biorąc, dopełnienie i marginesy nie są dziedziczone. Ale przykład pokazuje, że umiejscowienie elementu jest uzależnione od jego przodków i elementów braci, przez co marginesy elementów rodzica mają wpływ na elementy potomka.

Gdyby w powyższym przykładzie uwzględniono ramki, to znajdowałyby się one pomiędzy dopełnieniem a marginesami

Poniższy diagram wprowadza trochę przydatnej terminologii:

                             --------------- <-- wierzch bloku
                             margines górny
                             ---------------
                             krawędź górna
                             ---------------
                             dopełnienie górne
                             +-------------+ <-- wierzch elementu
|          |        |        |             |         |         |         |
|--lewy--  |--lewa--|--lewe--|-- treść   --|--prawe--|--prawa--|--prawy--|
| margines | krawędź| dopełn.|             | dopełn. | krawędź | margin. |
|          | ramki  |        |             |         |  ramki  |         |
                             +-------------+ <-- spód elementu
^                            ^             ^                             ^
lewa   lewa krawędź wewnętrzna             prawa krawędź wewn.       prawa
krawędź                                                              krawędź
zewnętrzna                  dopełnienie dolne                        zewnętrzna
                            ---------------
                             krawędź dolna
                            ---------------
                             margines dolny
                            --------------- <-- spód bloku

Lewą krawędź zewnętrzną stanowi krawędź elementu z uwzględnieniem dopełnienia, krawędzi i marginesu. Lewą krawędź wewnętrzną stanowi krawędź zawartości elementu. To samo tyczy się prawej krawędzi wewnętrznej. Wierzch bloku to wierzch elementu znajdujący się ponad dopełnieniem, krawędzią i marginesem (zdefiniowany tylko dla elementów śródliniowych i pływających. Nie dotyczy elementów "niepływających" oraz blokowych). Wierzch elementu to górna granica zawartości elementu, bez dopełnienia, krawędzi i marginesu. Spód bloku to dolna granica bloku, znajdująca się poniżej dopełnienia, krawędzi i marginesu (zdefiniowany tylko dla elementów śródliniowych i pływających. Nie dotyczy elementów "niepływających" oraz blokowych). Spód elementu to dolna granica zawartości elementu, bez dopełnienia, krawędzi i marginesu.

Szerokość elementu odpowiada szerokości jego zawartości. Inaczej mówiąc jest to odległość pomiędzy prawą i lewą krawędzią wewnętrzną. Wysokość elementu to odległość pomiędzy wierzchem i spodem elementu.

4.1.1 Formatowanie pionowe

Szerokość marginesów "niepływających" elementów blokowych określa minimalną odległość bloku od krawędzi otaczających go bloków. Jeżeli dwa marginesy pionowe znajdą się obok siebie (tzn. nie będzie pomiędzy nimi obramowania ani dopełnienia), to ich wartości nie zsumują się, ale ulegną połączeniu w ten sposób, że margines o mnieszej wartości zostanie usunięty, a odległość między elementami będzie równa wartości większego marginesu. W większości przypadków, rezultat takiego zabiegu jest wizualnie bardziej atrakcyjny i bliższy zamierzeniom autora. W przykładzie powyżej, marginesy pomiędzy dwoma elementami LI zostały scalone. Podobnie, gdyby pomiędzy elementem UL i pierwszym elementem LI dopełnienie wynosiło zero, to marginesy tych elementów scaliłyby się.

Jeżeli wartość marginesów scalonych ma wartość ujemną, to wartość ta jest odejmowana od dodatniej wartości marginesów scalonych. Jeżeli nie ma marginesu o dodatniej wartości, to odejmowanie wartości marginesu scalonego wykonywane jest od zera.

4.1.2 Formatowanie poziome

Rozmiar i położenie w poziomie "niepływających" elementów blokowych określa się przy pomocy siedmiu atrybutów: margin-left, border-left, padding-left, width, padding-right, border-right oraz margin-right. Suma wartości tych wszystkich atrybutów jest zawsze równa szerokości (width) elementu nadrzędnego, w którym znajduje się dany blok.

Domyślnie szerokość (width) elementu ustawiona jest na wartość auto. Jeżeli element nie jest elementem osadzonym, oznacza to że jego szerokość obliczona zostanie przez przeglądarkę, w taki sposób, że suma wartości wszystkich siedmiu atrybutów, o których mowa powyżej będzie równa szerokości elementu rodzica. W przypadku elementów osadzonych, wartość auto atrybutu width jest automatycznie zamieniana na wymiary własne elementu.

Trzy z siedmiu wymienionych atrybutów może przybierać wartość auto: margin-left, width oraz margin-right. W przypadku elementów osadzonych, których wartość auto dla atrybutu width jest automatycznie zastępowana wymiarami własnymi elementu, możliwe są wartości auto tylko dla dwóch atrybutów.

Minimalna szerokość elementu uzależniona jest od aplikacji klienckiej, ale nie może być liczbą ujemną (minimalna szerokość może być różna dla różnych elementów i uzależniona od innych atrybutów). Jeżeli szerokość elementu jest mniejsza od dopuszczalnej, to zostanie ona automatycznie powiększona do dopuszczalnej wartości.

Jeżeli tylko jeden z atrybutów margin-left, width lub margin-right ma wartość auto, to aplikacja kliencka nada mu taką szerokość, aby suma wartości wszystkich siedmiu ztrybutów była równa szerokości elementu rodzica.

Jeżeli żaden atrybut nie ma przypisanej wartości auto, to zostanie ona nadana atrybutowi margin-right.

Jeżeli więcej niż jeden z tych trzech atrybutów ma wartość auto i jeden z nich to atrybut width, to pozostałe (margin-left i/lub margin-right) zostaną ustawione na zero a szerokość (width) zostanie ustawiona w taki sposób, aby suma wszystkich siedmiu wynosiła tyle samo co szerokość elementu rodzica.

Jeżeli zarówno atrybut margin-left jak i margin-right mają ustaloną wartość auto, to zostaną im nadane takie same wartości. Dzięki temu element zostanie wypośrodkowany wewnątrz elementu rodzica.

Jeżeli wartość auto zostanie nadana jednemu z wymienionych siedmiu atrybutów w elemencie śródliniowym lub pływającym, to zostanie ona potraktowana jako zero.

W przeciwieństwie do marginesów pionowych, marginesy poziome nie podlegają scalaniu.

4.1.3 Listy

Elementy z atrybutem display o wartości list-item formatowane są jako elementy blokowe poprzedzone symbolem reprezentującym element listy. Rodzaj symbolu określany jest przez atrybut list-style. Umiejscowienie symbolu elementu listy uzależnione jest od wartości atrybutu list-style:

<STYLE TYPE="text/css">
  UL         { list-style: outside }
  UL.compact { list-style: inside }
</STYLE>

<UL>
  <LI>pierwszy element listy
  <LI>drugi element listy
</UL>
<UL CLASS=COMPACT>
  <LI>pierwszy element listy
  <LI>drugi element listy
</UL>

Sposób formatowania powyższego przykłady może wyglądać następująco:

* pierwszy element listy
  jest zawsze pierwszy
* drugi element listy
  jest zawsze drugi
  * pierwszy element listy
  jest zawsze pierwszy
  * drugi element listy
  jest zawsze drugi

W tekście pisanym od prawej do lewej, symbole elementów listy pojawiłyby się po prawej stronie.

4.1.4 Elementy pływające

Przy użyciu atrybutu float można wykluczyć dany element z normalnego układu elementów na stronie. Wszystkie elementy pływające (floating elements) są zarazem elementami blokowymi. Np. nadając wartość left atrybutowi float dla elementu IMG spowoduje się przesunięcie obrazka w lewo aż do napotkania marginesu, dopełnienia lub krawędzi innego elementu blokowego. Pozostałe elementy na stronie będą otaczały element pływający z prawej strony. Marginesy i dopełnienie oraz ramki takiego elementu pozostają bez zmian. Ponadto marginesy elementów pływających nigdy nie ulegają scalaniu.

Pozycjonowanie elementów pływających podlega następującym zasadom (objaśnienie użytych terminów znajduje się w podrozdziale 4.1):

1. Lewa krawędź zewnętrzna elementu pływającego do lewej nie może znajdować się po lewej stronie lewej krawędzi wewnętrznej elementu nadrzędnego. Analogicznie dla elementów pływających do prawej.
2. Lewa krawędź zewnętrzna elementu pływającego do lewej musi znajdować się po prawej stronie prawej zewnętrznej krawędzi wszystkich wcześniejszych (w kodzie HTML) elementów pływających do lewej lub jego wierzch musi znajdować się poniżej spodu wszystkich wcześniejszych elementów pływających. Analogicznie dla elementów pływających do prawej.
3. Prawa krawędź zewnętrzna elementu pływającego do lewej nie może znajdować się po prawej stronie lewej krawędzi zewnętrznej elementu pływającego do prawej, który znajduje się po jego prawej stronie. Analogicznie dla elementów pływających do prawej.
4. Wierzch pływającego bloku nie może znajdować się wyżej niż wierzch jego elementu rodzica.
5. Wierzch pływającego bloku nie może znajdować się wyżej niż wierzch któregokolwiek wcześniejszego bloku pływającego lub elementu blokowego.
6. Wierzch pływającego bloku nie może znajdować się wyżej niż wierzch bloku-linii (patrz podrozdział 4.4) z zawartością, która poprzedza ten element w kodzie HTML.
7. Element pływający musi znajdować się jak najwyżej.
8. Element pływający do lewej musi być wysunięty jak najdalej w lewo, natomiast element pływający do prawej, w prawo. Jeżeli jest możliwość umieszczenia elementu albo wyżej albo dalej, w którąś stronę, preferowana jest wyższa pozycja.

<STYLE TYPE="text/css">
  IMG { float: left }
  BODY, P, IMG { margin: 2em }
</STYLE>

<BODY>
  <P>
    <IMG SRC=img.gif>
    To jest tylko przykładowy tekst
</BODY>

Przykładowy sposób formatowania powyższego przykładu:

 ________________________________________
|
|          max(BODY margin, P margin)
|          ______________________________
|    |    |             To jest tylko
| B  | P  | IMG margins przykładowy tekst
| O  |    |    _____    którego zadaniem
| D  | m  |   |     |   jest pokazać sposób
| Y  | a  |   | IMG |   w jaki elementy pływające
|    | r  |   |     |   przesuwają się wewnątrz
| m  | g  |   |_____|   elementu rodzica
| a  | i  |             z uwzględnieniem
| r  | n  |             marginesów, obramowania
| g  |    |             i dopełnienia. Warto
| i  |    |zauważyć, jak przylegające marginesy pionowe
| n  |    |łączą się pomiędzy "niepływającymi"
|    |    |elementami blokowymi.

Warto zauważyć, że element IMG w całości zawiera się w obrębie elementu P.

Elementy pływające mogą nachodzić na marginesy, ramki lub dopełnienie innych elementów tylko w dwóch sytuacjach:

• Kiedy margines elementu pływającego ma ustawioną wartość ujemną. (marginesy ujemne w elementach pływających traktowane są tak samo jak w elementach blokowych).
• Kiedy element pływający jest szerszy lub wyższy od elementu, w którym się znajduje.

4.2 Elementy śródliniowe

Elementy, które nie są formatowane jako elementy blokowe są elementami śródliniowymi. Oznacza to, że mogą one występować razem z innymi elementami w jednej linii. Rozpatrzmy poniższy przykład:

<P>Kilka <EM>wyróżnionych</EM> słów <STRONG>na ekranie</STRONG>.</P>

Domyślnie, element P jest elementem blokowym, natomiast EM i STRONG to elementy śródliniowe. Jeżeli szerokość elementu P na to pozwoli, w jednej linijce znajdą się dwa elementy śródliniowe:

Kilka wyróżnionych słów na ekranie.

W sytuacji, gdy element śródliniowy nie mieści się w jednej linijce, następuje jego podział na kilka bloków:

<P>Kilka <EM>wyróżnionych słów</EM> na ekranie.</P>

Przykładowy sposób formatowania powyższego przykładu:

Kilka wyróżnionych
słów na ekranie.

Marginesy, obramowanie, dopełnienie i styl tekstu nie mają wpływu na miejsce wystąpienia złamania linii.

         ----------
Kilka |wyróżnionych
         ----------
-----
słów| na ekranie.
-----

Powyższy obrazek jest nieco zniekształcony ze względu na użycie techniki ASCII. W podrozdziale 4.4 znajdują się wytyczne do obliczania wysokości linii.

4.3 Elementy osadzone

Element osadzony sam w sobie nie posiada żadnej zawartości, a służy on jedynie wskazaniu na pewną treść, która powinna znaleźć się na jego miejscu. Np. w języku HTML takim elementem jest element IMG, którego atrybut SRC wskazuje na źródło do pobrania, a następnie wyświetlenia grafiki. Używając tego elementu można założyć, że posiada on pewne wymiary własne. Jeżeli wartość atrybutu width jest ustawiona na auto, to zostaną zastosowane wymiary własne elementu. Natomiast w przypadku użycia innej wartości, element jest w razie potrzeby odpowiednio przeskalowywany (metoda skalowania zależy od rodzaju użytych mediów). Te same zasady dotyczą własności height.

Elementy osadzone mogą być zarówno elementami blokowymi jak i śródliniowymi.

4.4 Wysokość linii

Wszystkie elementy posiadają własność line-height, która w zasadzie określa całkowitą wysokość linii tekstu. Jeżeli wysokość linii jest większa od wysokości tekstu, dodawana jest dodatkowa przestrzeń nad i pod tekstem. Np. jeżeli tekst ma 12pt wysokości a wartość line-height wynosi 14pt, to dodawana jest przestrzeń o szerokości 2pt. Jeden punkt dodawany jest nad tekstem i jeden pod tekstem. Puste elementy mają taki sam wpływ na te wyliczenia jak elementy zawierające treść.

Różnica pomiędzy wielkością czcionki i wartością line-height zwana jest leadingiem. Połowa tej wartości to half-leading. Po sformatowaniu, każda linia tworzy prostokątny blok zwany blokiem linii.

Jeżeli w jednej linii tekstu znajduje się kilka odcinków o różnych wartościach line-height (ponieważ linia składa się z kilku różnych elementów śródliniowych), to każdy odcinek posiada własny half-leading u góry i u dołu. Wysokość bloku linii liczona jest od wierzchu najwyższego odcinka do spodu odcinka najniższego. Należy pamiętać, że wierzch i spód niekoniecznie muszą należeć do najwyższego elementu ze względu na możliwość ich pozycjonowania w pionie przy pomocy własności vertical-align. W akapicie, każdy blok linii umieszczany jest bezpośrednio pod poprzednim blokiem.

Dopełnienie, marginesy i obramowanie pod i nad śródliniowymi elementami nieosadzonymi nie mają wpływu na wysokość linii. Innymi słowy, jeżeli wartość line-height jest niewystarczająca by pomieścić określone dopełnienie lub obramowanie, to będzie ona nachodziła na tekst w innych liniach.

Elementy osadzone (np. obrazy) mogą rozciągać linię, jeżeli wierzch takiego elementu (włącznie z dopełnieniem, obramowaniem i marginesem) znajduje się powyżej najwyższego odcinka tekstu lub gdy jego spód znajduje się poniżej najniższego odcinka.

W przypadku, gdy wartość atrybutu line-height dla całego akapitu jest jednakowa i nie ma żadnych wysokich obrazków, można mieć pewność, na podstawie powyżej omówionych zasad, że odległość pomiędzy następującymi po sobie liniami tekstu będzie równa wartości określonej dla atrybutu line-height. Jest to ważne w przypadkach kiedy zachodzi potrzeba wyrównania kolumn tekstu o różnych wielkościach czcionki, np. w tabelach.

Nie wyklucza to jednak możliwości nakładania się dwóch przylegających do siebie linii. Wartość line-height może być mniejsza niż wysokość tekstu, przez co wartość leadingu będzie liczbą ujemną. Przydaje się to w przypadku, gdy wiadomo jest, że tekst nie będzie zawierał żadnych elementów umieszczonych pod wierszem (np. składający się z samych wielkich liter), dzięki czemu linie można umieścić trochę bliżej siebie.

4.5 Obszar roboczy

Obszar roboczy to pole, na którym prezentowane są dokumenty. Nie istnieje żaden element strukturalny dokumentu, który odpowiada obszarowi roboczemu. Ta sytuacja stwarza dwa problemy:

• Z którego miejsca powinno się ustalać wymiary obszaru roboczego.
• Co zrobić z powierzchnią, której nie pokrywa aktualnie prezentowany dokument.

Rozsądnym rozwiązaniem pierwszego problemu jest traktowanie rozmiarów okna jako domyślnej szerokości obszaru roboczego, ale ostateczna decyzja zależy od aplikacji klienckiej. Wydaje się także, że aplikacja kliencka powinna zmieniać szerokość obszaru roboczego wraz ze zmianą wielkości okna, ale to także leży poza zasięgiem CSS1.

Dzięki rozszerzeniom HTML możliwe jest rozwiązanie drugiego problemu. Dzięki atrybutom znacznika BODY można ustawić tło dla całego obszaru roboczego. W celu spełnienia oczekiwań projektantów, w CSS1 stworzono specjalną zasadę służącą do określania tła obszaru roboczego:

Jeżeli wartość parametru background elementu HTML jest różna od transparent, to zostanie ona zastosowana, w przeciwnym przypadku zastosowane zostanie tło elementu BODY. Jeżli tło tego drugiego także jest ustawione na transparent, to sposób prezentacji jest nieokreślony.

Dzięki tej zasadzie możliwy jest poniższy przykład:

<HTML STYLE="background: url(http://style.com/marble.png)">
<BODY STYLE="background: red">

Powyższy przykład kodu spowoduje, że obszar roboczy pokryty zostanie tłem z pliku "marble.png". Tło elementu BODY (który może, ale nie musi w pełni pokrywać obszaru roboczego) przybierze kolor czerwony.

Rekomendowane jest ustalanie własności tła obszaru roboczego przy pomocy elementu BODY, przynajmniej do czasu pojawienia się nowych metod.

4.6 Element BR

Obecnie w CSS1 brak sposobów kontroli sposobu funkcjonowania elementu BR. W HTML element BR służy do łamania linii w wybranym miejscu. Efektem działania tego elementu jest pojawienie się złamania linii. Możliwe, że w przyszłych wersjach CSS zostanie dodana możliwość kontroli tego typu elementów, ale klienty działające w oparciu o CSS1 muszą traktować element BR w sposób wyjątkowy.

---

Niniejszy dokument jest tłumaczeniem rekomendacji W3C Cascading Style Sheets, level 1. Tłumaczenie to nie ma statusu dokumentu normatywnego i może zawierać błędy wynikające z tłumaczenia. Tylko dokument znajdujący się na stronie W3C pod adresem http://www.w3.org/TR/REC-CSS1 ma charakter normatywny.

Copyright © 2004 W3C^® (MIT, ERCIM, Keio), Wszystkie prawa zastrzeżone. W3C stosuje następujące zasady dotyczące odpowiedzialności cywilnej, znaków towarowych, używania dokumentu i licencji oprogramowania.