Start Publikacje Tłumaczenia Książki Słownik programistyczny

Promocje Heliona

Bestsellery Heliona

10 Model formatowania wizualnego — szczegóły

Spis treści

10.1 10.1 Definicja bloku zawierającego

Położenie i rozmiar bloku elementu są czasami obliczane względem prostokąta nazywanego blokiem zawierającym elementu. Definicja bloku zawierającego jest następująca:

Blok zawierający elementu głównego jest prostokątem o nazwie pierwotny blok zawierający. W mediach ciągłych blok ten ma rozmiar obszaru widoku i jest zaczepiony na początku kanwy. W mediach stronicowanych jest to obszar strony. Własność 'direction' pierwotnego bloku zawierającego jest taka sama, jak elementu głównego.
Blok zawierający pozostałych elementów pozycjonowanych względnie ('relative') lub statycznie ('static'), wyznacza krawędź treści pola najbliższego przodka będącego elementem blokowym, komórką tabeli lub elementem śródliniowo-blokowym.
Blokiem zawierającym elementów pozycjonowanych stale ('fixed') jest obszar widoku (w mediach ciągłych) lub obszar strony (w mediach stronicowanych).
Blokiem zawierającym elementów pozycjonowanych bezwzględnie ('absolute') jest najbliższy przodek z własnością 'position' ustawioną na 'absolute', 'relative' lub 'fixed' w następujący sposób:
1. Jeśli przodek jest elementem śródliniowym, blok zawierający zależy od własności 'direction' tego przodka:
  1. Jeśli własność 'direction' ma wartość 'ltr', górna i lewa krawędź bloku zawierającego są górną i lewą krawędzią dopełnienia pierwszego pola wygenerowanego przez przodka, a krawędzie dolna i prawa są krawędziami dolną i prawą dopełnienia ostatniego pola tego przodka.
  2. Jeśli własność 'direction' ma wartość 'ltr', górna i prawa krawędź bloku zawierającego są górną i prawą krawędzią dopełnienia pierwszego pola wygenerowanego przez przodka, a krawędzie dolna i lewa są krawędziami dolną i lewą dopełnienia ostatniego pola tego przodka.
  Uwaga: to może spowodować, że szerokość bloku zawierającego będzie miała wartość ujemną.
2. W pozostałych przypadkach blok zawierający jest tworzony przez krawędź obramowania przodka.
Jeśli nie ma takiego przodka, blokiem zawierającym jest pierwotny blok zawierający.

W mediach stronicowanych położenie elementu pozycjonowanego bezwzględnie jest ustalane w odniesieniu do jego bloku zawierającego bez uwzględnienia złamań stron (tak, jakby dokument był ciągły). Element może zostać podzielony na kilka stron.

Jeśli położenie bezwzględnie pozycjonowanej treści wypadnie na stronie innej niż układana (bieżąca) lub na bieżącej stronie, ale w miejscu, które zostało już przygotowane do druku, drukarka może

umieścić tę treść w innym miejscu na bieżącej stronie,
umieścić ją na następnej stronie,
pominąć ją.

Należy pamiętać, że element blokowy podzielony na kilka stron może na każdej stronie mieć inną szerokość oraz, że mogą istnieć jakieś ograniczenia urządzeniowe.

Jeśli nie zostanie zastosowane żadne pozycjonowanie, bloki zawierające w poniższym dokumencie:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>Ilustracja bloków zawierających</TITLE>
   </HEAD>
   <BODY id="body">
      <DIV id="div1">
      <P id="p1">Tekst pierwszego akapitu...</P>
      <P id="p2">Ten tekst <EM id="em1"> znajduje się w 
      <STRONG id="strong1">drugim</STRONG> akapicie.</EM></P>
      </DIV>
   </BODY>
</HTML>

zostaną ustanowione następująco:

Pole wygenerowane przez	Blok zawierający tego pola
html	pierwotny blok zawierający (zależny od aplikacji klienckiej)
body	html
div1	body
p1	div1
p2	div1
em1	p2
strong1	p2

Jeśli element "div1" zostanie wypozycjonowany:

   #div1 { position: absolute; left: 50px; top: 50px }

jego blokiem zawierającym nie będzie element body, tylko pierwotny blok zawierający (ponieważ element ten nie ma żadnych pozycjonowanych przodków).

Jeśli wypozycjonowany zostanie także element "em1":

   #div1 { position: absolute; left: 50px; top: 50px }
   #em1  { position: absolute; left: 100px; top: 100px }

tabela bloków zawierających zmieni się następująco:

Pole wygenerowane przez	Blok zawierający tego pola
html	pierwotny blok zawierający (zależny od aplikacji klienckiej)
body	html
div1	pierwotny blok zawierający
p1	div1
p2	div1
em1	div1
strong1	em1

Pozycjonowanie elementu "em1" spowodowało, że jego blokiem zawierającym stał się najbliższy pozycjonowany przodek (tzn. pole wygenerowane przez element "div1").

10.2 Szerokość treści: własność 'width'

'width'

Wartość:	<length> \| <percentage> \| auto \| inherit
Wartość domyślna:	auto
Zastosowanie:	wszystkie elementy z wyjątkiem niezastępowanych elementów śródliniowych, wierszy tabeli oraz grup wierszy
Dziedziczenie:	nie
Wartości procentowe:	odnoszą się do szerokości bloku zawierającego
Media:	wizualne
Wartość obliczana:	procent lub 'auto', jak określono lub wartość bezwzględna; 'auto' jeśli własność nie ma zastosowania

Własność ta służy do określania szerokości treści pól wygenerowanych przez elementy blokowe i zastępowane.

Własność ta nie dotyczy niezastępowanych elementów śródliniowych. Szerokość treści niezastępowanego pola śródliniowego jest równa znajdującej się w nim treści (przed względnym przesunięciem elementów dzieci). Należy przypomnieć, że pola śródliniowe układane są w polach liniowych. Szerokość pola liniowego jest równa szerokości jego bloku zawierającego, ale może zostać zmniejszona przez pola pływające.

Pole elementu zastępowanego ma szerokość wewnętrzną, którą można zmienić, jeśli wartość własności 'width' jest inna niż 'auto'.

Opis wartości:

<length>: Służy do określania szerokości obszaru treści za pomocą jednostek długości.
<percentage>: Określa szerokość procentowo. Procent jest obliczany na podstawie szerokości bloku zawierającego generowane pole. Jeśli szerokość bloku zawierającego zależy od szerokości tego elementu, w takiej sytuacji zgodnie z CSS 2.1 wynik jest nieokreślony. Uwaga: wartość procentowa określająca szerokość elementów pozycjonowanych bezwzględnie, których blok zawierający stanowi element blokowy jest obliczana w odniesieniu do szerokości pola dopełnienia tego elementu. Jest to zmiana w stosunku do CSS 1, gdzie szerokość wyrażona w procentach zawsze była obliczana w odniesieniu do pola treści elementu rodzica.
auto: Szerokość zależy od wartości innych własności. Zobacz dalsze podrozdziały.

Własność 'width' nie przyjmuje wartości ujemnych.

Poniższa reguła ustawia szerokość akapitów na 100 pikseli:

p { width: 100px }

10.3 Obliczanie szerokości i marginesów

Wartości własności 'width', 'margin-left', 'margin-right', 'left' oraz 'right' użytych do tworzenia układu zależą od typu wygenerowanego pola i od siebie wzajemnie. (Wartość użyta do tworzenia układu czasami nazywana jest wartością używaną.) Zasadniczo wartości używane są równe wartościom obliczonym, w których 'auto' zamieniono na odpowiednią wartość i procentom obliczonym na podstawie bloku zawierającego, ale są wyjątki. Należy wyróżnić następujące przypadki:

elementy śródliniowe niezastępowane
elementy śródliniowe zastępowane
elementy blokowe niezastępowane w układzie normalnym
elementy blokowe zastępowane w układzie normalnym
elementy pływające niezastępowane
elementy pływające zastępowane
elementy niezastępowane pozycjonowane bezwzględnie
elementy zastępowane pozycjonowane bezwzględnie
elementy blokowo-śródliniowe niezastępowane w układzie normalnym
elementy blokowo-śródliniowe zastępowane w układzie normalnym

Punkty 1-6 i 9-10: wartości własności 'left' i 'right' w przypadku względnego pozycjonowania elementów są określane wg zasad opisanych w podrozdziale 9.4.3.

10.3.1 Elementy śródliniowe niezastępowane

Własność 'width' nie dotyczy. Wartość obliczona wartości 'auto' własności 'margin-left' lub 'margin-right' staje się wartością używaną '0'.

10.3.2 Elementy śródliniowe zastępowane

Wartość obliczona wartości 'auto' własności 'margin-left' lub 'margin-right' staje się wartością używaną '0'.

Jeśli własności 'height' i 'width' mają wartości obliczone 'auto' i element ma szerokość wewnętrzną, szerokość ta jest wartością używaną własności 'width'.

Jeśli własności 'height' i 'width' mają wartości obliczone 'auto', a element nie ma szerokości wewnętrznej, lecz ma wysokość wewnętrzną i wewnętrzny współczynnik proporcji lub jeśli własność 'width' ma wartość obliczoną 'auto', a własność 'height' ma jakąś inną wartość obliczoną i element nie ma wewnętrznego współczynnika proporcji, wartość używana własności 'width' wynosi:

(wysokość używana) * (wewnętrzny współczynnik proporcji)

Jeśli własności 'height' i 'width' mają wartości obliczone 'auto', a element ma wewnętrzny współczynnik proporcji, lecz nie ma wewnętrznej szerokości ani wysokości i szerokość bloku zawierającego nie zależy od szerokości elementu zastępowanego, wartość używana własności 'width' jest obliczana z równania ograniczeń dla blokowych elementów niezastępowanych w układzie normalnym.

Jeśli natomiast własność 'width' ma wartość obliczoną 'auto' i element ma szerokość wewnętrzną, wówczas ta właśnie szerokość jest wartością używaną własności 'width'.

Jeśli jednak własność 'width' ma wartość obliczoną 'auto', ale nie jest spełniony żaden z powyższych warunków, wartość używana własności 'width' wynosi 300 px. Jeśli szerokość 300 px to za dużo, aby zmieścić się w urządzeniu, aplikacja kliencka powinna użyć szerokości największego prostokąta o współczynniku 2:1 mieszczącego się w urządzeniu.

Procentowe szerokości wewnętrzne są najpierw obliczane w odniesieniu do szerokości bloku zawierającego, jeśli szerokość ta sama nie zależy od szerokości elementu zastępowanego. Jeśli tak, układu nie da się określić wg zasad CSS 2.1.

10.3.3 Elementy blokowe niezastępowane w układzie normalnym

Wartości pozostałych własności muszą spełniać poniższy warunek:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = szerokość bloku zawierającego

Jeśli własność 'width' nie ma wartości 'auto' i suma wartości własności 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (plus dowolna z własności 'margin-left' lub 'margin-right', która nie ma wartości 'auto') jest większa od szerokości bloku zawierającego, to wartości 'auto' własności 'margin-left' lub 'margin-right', na potrzeby poniższych zasad, traktowane są jako zero.

Jeśli wszystkie z powyższych mają wartość obliczoną inną niż 'auto', wartości te są określane jako "nadmiernie ograniczone" i jedna z wartości użytych będzie musiała zostać zmieniona w stosunku do swojej wartości obliczonej. Jeśli własność 'direction' bloku zawierającego ma wartość 'ltr', wartość określona własności 'margin-right' jest ignorowana i zostaje obliczona taka wartość, dzięki której równość będzie prawdziwa. Jeśli wartość własności 'direction' to 'rtl', ta sama procedura dotyczy własności 'margin-left'.

Jeśli jest dokładnie jedna wartość 'auto', jej wartość używana da się wyliczyć z równości.

Jeśli własność 'width' zostanie ustawiona na 'auto', wszystkie inne wartości 'auto' są zamieniane na '0' i wartość własności 'width' wynika z powstałej równości.

Jeśli własności 'margin-left' i 'margin-right' mają wartość 'auto', ich wartości używane są równe. W ten sposób element zostanie ustawiony w poziomie na środku bloku zawierającego.

10.3.4 Elementy blokowe zastępowane w układzie normalnym

Wartość używana własności 'width' jest określana tak samo, jak dla śródliniowych elementów zastępowanych. Następnie zostają zastosowane zasady dla niezastępowanych elementów blokowych w celu określenia marginesów.

10.3.5 Elementy pływające niezastępowane

Jeśli własność 'margin-left' lub 'margin-right' ma wartość obliczoną 'auto', jej wartość używana wynosi '0'.

Jeśli wartość obliczona własności 'width' to 'auto', wartość używana wynosi tyle, ile trzeba, aby element się zmieścił.

Obliczanie pasującej szerokości jest podobne do obliczania szerokości komórki tabeli za pomocą algorytmu automatycznego rozmieszczenia tabeli. Wygląda to mniej więcej tak: obliczenie preferowanej szerokości poprzez sformatowanie treści bez łamania wierszy poza miejscami, w których znajdują się jawne złamania wiersza, oraz obliczenie preferowanej minimalnej szerokości, np. poprzez wypróbowanie wszystkich możliwych złamań wiersza. Specyfikacja CSS 2.1 nie podaje dokładnej definicji tego algorytmu. Następnie zostaje znaleziona szerokość dostępna: w tym przypadku jest to szerokość bloku zawierającego minus wartości używane własności 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right' oraz szerokości odpowiednich pasków przewijania.

Wówczas algorytm dopasowywania szerokości jest następujący: min(maks.(preferowana minimalna szerokość, szerokość dostępna), preferowana szerokość).

10.3.6 Elementy pływające zastępowane

Jeśli własność 'margin-left' lub 'margin-right' ma wartość obliczoną 'auto', jej wartość używana wynosi '0'. Wartość używana własności 'width' jest określana tak samo, jak dla śródliniowych elementów zastępowanych.

10.3.7 Elementy niezastępowane pozycjonowane bezwzględnie

Na potrzeby tego i następnego podrozdziału, termin "położenie statyczne" (elementu) oznacza, z grubsza, położenie, jakie element miałby w układzie normalnym. Mówiąc dokładniej:

Blok zawierający położenia statycznego to blok zawierający hipotetycznego pola, które byłoby pierwszym polem elementu, gdyby wartość określona jego własności 'position' była 'static', a wartość określona jego własności 'float' wynosiła 'none'. (Należy zauważyć, że ze względu na zasady opisane w podrozdziale 9.7 te hipotetyczne obliczenia mogą dodatkowo wymagać przypuszczalnego przyjęcia innej wartości obliczonej dla własności 'display'.)
Położenie statyczne dla własności 'left' to odległość od lewej krawędzi bloku zawierającego do lewego marginesu hipotetycznego pola, które byłoby pierwszym polem elementu, gdyby jego własność 'position' miała wartość 'static' a własność 'float' — 'none'. Jeśli hipotetyczne pole znajduje się po lewej stronie bloku zawierającego, wartość ta jest ujemna.
Położenie statyczne dla własności 'right' to odległość od prawej krawędzi bloku zawierającego do prawego marginesu tego samego hipotetycznego bloku, co powyżej. Jeśli hipotetyczne pole znajduje się po lewej stronie bloku zawierającego, wartość ta jest dodatnia.

Aplikacje klienckie zamiast obliczać wymiary tego hipotetycznego bloku, mogą spróbować zgadnąć jego prawdopodobne położenie.

Na potrzeby obliczania położenia statycznego, blok zawierający elementów pozycjonowanych stale to pierwotny blok zawierający a nie obszar widoku. Ponadto powinno zostać przyjęte założenie, że wszystkie przewijalne pola są przewinięte do początku.

Równanie pozwalające określić wartości używane tych elementów jest następujące:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = szerokość bloku zawierającego

Jeśli własności 'left', 'width' oraz 'right' mają wartość 'auto': wartości 'auto' własności 'margin-left' i 'margin-right' zostają zamienione na 0. Następnie, jeśli własność 'direction' elementu ustanawiającego blok zawierający położenia statycznego ma wartość 'ltr', własność 'left' zostaje ustawiona na położenie statyczne i zostaje zastosowana zasada nr 3 wymieniona poniżej. W przeciwnym przypadku własność 'right' zostaje ustawiona na położenie statyczne i zostaje zastosowana zasada nr 1 wymieniona poniżej.

Jeśli żadna z tych trzech własności nie ma wartości 'auto': jeśli zarówno własność 'margin-left' jak i 'margin-right' mają wartość 'auto', zostaje rozwiązane równanie z dodatkowym warunkiem, że oba te marginesy muszą mieć tę samą wartość, chyba że spowodowałoby to, że byłyby ujemne. W takim przypadku, jeśli własność 'direction' bloku zawierającego ma wartość 'ltr' ('rtl'), własność 'margin-left' ('margin-right') powinna zostać ustawiona na zero i równanie powinno zostać rozwiązane dla 'margin-right' ('margin-left'). Jeśli tylko własność 'margin-left' lub 'margin-right' ma wartość 'auto', równanie zostanie rozwiązane dla tej wartości. Jeśli wartości są nadmiernie ograniczone, zostanie zignorowana wartość 'left' (jeśli własność 'direction' bloku zawierającego ma wartość 'rtl') lub 'right' (jeśli własność 'direction' bloku zawierającego ma wartość 'ltr') i równanie zostanie rozwiązane dla tej wartości.

W pozostałych przypadkach wartości 'auto' własności 'margin-left' i 'margin-right' zostają ustawione na 0 i zostaje wybrana ta z poniższych sześciu zasad, która jest odpowiednia.

Własności 'left' i 'width' mają wartość 'auto' a własność 'right' nie ma wartości 'auto' — szerokość jest dostosowywana tak, aby pasowała. Następnie zostaje rozwiązane równanie dla 'left'.
Własności 'left' i 'right' mają wartość 'auto' a własność 'width' nie ma wartości 'auto' — jeśli własność 'direction' elementu ustanawiającego blok zawierający położenia statycznego ma wartość 'ltr', własność 'left' zostanie ustawiona na położenie statyczne, w przeciwnym przypadku własność 'right' zostanie ustawiona na położenie statyczne. Następnie równanie zostaje rozwiązane dla 'left' (własność 'direction ma wartość 'rtl') lub dla 'right' (własność 'direction ma wartość 'ltr').
Własności 'width' i 'right' mają wartość 'auto' a własność 'left' nie ma wartości 'auto' — szerokość jest dostosowywana tak, aby pasowała. Następnie zostaje rozwiązane równanie dla 'right'.
Własność 'left' ma wartość 'auto', własności 'width' i 'right' nie mają wartości 'auto' — równanie zostaje rozwiązane dla 'left'
Własność 'width' ma wartość 'auto', własności 'left' i 'right' nie mają wartości 'auto' — równanie zostaje rozwiązane dla 'width'
Własność 'right' ma wartość 'auto', własności 'left' i 'width' nie mają wartości 'auto' — równanie zostaje rozwiązane dla 'right'

Obliczanie pasującej szerokości jest podobne do obliczania szerokości komórki tabeli za pomocą algorytmu automatycznego rozmieszczenia tabeli. Wygląda to mniej więcej tak: obliczenie preferowanej szerokości poprzez sformatowanie treści bez łamania wierszy poza miejscami, w których znajdują się jawne złamania wiersza, oraz obliczenie preferowanej minimalnej szerokości, np. poprzez wypróbowanie wszystkich możliwych złamań wiersza. Specyfikacja CSS 2.1 nie podaje dokładnej definicji tego algorytmu. Następnie zostaje obliczona szerokość dostępna: w tym celu rozwiązywane jest równanie dla 'width' po ustawieniu 'left' (w przypadku 1) lub 'right' (w przypadku 3) na 0.

Wówczas algorytm dopasowywania szerokości jest następujący: min(maks.(preferowana minimalna szerokość, szerokość dostępna), preferowana szerokość).

10.3.8 Elementy zastępowane pozycjonowane bezwzględnie

W tym przypadku zastosowanie mają zasady z podrozdziału 10.3.7 do równania ograniczeń włącznie. Resztę owego podrozdziału należy zastąpić poniższymi zasadami:

Wartość używana własności 'width' jest określana tak samo, jak dla śródliniowych elementów zastępowanych. Jeśli własność 'margin-left' lub 'margin-right' ma wartość określoną 'auto', jej wartość używana jest obliczana wg zasad opisanych poniżej.
Jeśli zarówno własność 'left' jak i 'right' mają wartość 'auto', wówczas, jeśli własność 'direction' elementu ustanawiającego blok zawierający położenia statycznego ma wartość 'ltr', własność 'left' zostaje ustawiona na położenie statyczne. Jeśli natomiast własność 'direction' ma wartość 'rtl', własność 'right' jest ustawiana na położenie statyczne.
Jeśli własność 'left' lub 'right' ma wartość 'auto', wartość 'auto' własności 'margin-left' lub 'margin-right' jest zamieniana na '0'.
Jeśli w tym miejscu zarówno własność 'margin-left' jak i 'margin-right' nadal mają wartość 'auto', zostaje rozwiązane równanie z dodatkowym warunkiem, że oba te marginesy muszą otrzymać takie same wartości, pod warunkiem, że nie będą ujemne. Gdyby tak było, jeśli własność 'direction' bloku zawierającego miałaby wartość 'ltr' ('rtl'), własność 'margin-left' ('margin-right') zostałaby ustawiona na zero i równanie zostałoby rozwiązane dla 'margin-right' ('margin-left').
Jeśli na tym etapie pozostała jakaś wartość 'auto', równanie zostaje rozwiązane dla tej wartości.
Jeśli w tym momencie wartości są nadmiernie ograniczone, zostanie zignorowana wartość 'left' (jeśli własność własności 'direction' bloku zawierającego ma wartość 'rtl') lub 'right' (jeśli własność 'direction' bloku zawierającego ma wartość 'ltr') i równanie zostanie rozwiązane dla tej wartości.

10.3.9 Elementy blokowo-śródliniowe niezastępowane w układzie normalnym

Jeśli wartość obliczona własności 'width' to 'auto', wartość używana jest równa szerokości pasującej, jak dla elementów pływających.

Wartość obliczona 'auto' własności 'margin-left' lub 'margin-right' staje się wartością używaną '0'.

10.3.10 Elementy blokowo-śródliniowe zastępowane w układzie normalnym

Zasady są dokładnie takie same, jak dla Elementów śródliniowych zastępowanych.

10.4 Szerokość minimalna i maksymalna: 'min-width' i 'max-width'

'min-width'

Wartość:	<length> \| <percentage> \| inherit
Wartość domyślna:	0
Zastosowanie:	wszystkie elementy z wyjątkiem niezastępowanych elementów śródliniowych, wierszy tabeli oraz grup wierszy
Dziedziczenie:	nie
Wartości procentowe:	odnoszą się do szerokości bloku zawierającego
Media:	wizualne
Wartość obliczana:	procent zgodnie z podaną wartością lub jednostka bezwzględna

'max-width'

Wartość:	<length> \| <percentage> \| none \| inherit
Wartość domyślna:	none
Zastosowanie:	wszystkie elementy z wyjątkiem niezastępowanych elementów śródliniowych, wierszy tabeli oraz grup wierszy
Dziedziczenie:	nie
Wartości procentowe:	odnoszą się do szerokości bloku zawierającego
Media:	wizualne
Wartość obliczana:	procent zgodnie z podaną wartością lub jednostka bezwzględna lub 'none'

Te dwie własności umożliwiają ograniczenie szerokości treści do określonego zakresu. Opis wartości:

<length>: Służy do określenia minimalnej lub maksymalnej szerokości używanej.
<percentage>: Służy do procentowego określania wartości używanej. Procent jest obliczany na podstawie szerokości bloku zawierającego generowane pole. Jeśli szerokość bloku zawierającego jest ujemna, wartość używana wynosi zero. Jeśli szerokość bloku zawierającego zależy od szerokości tego elementu, w takiej sytuacji zgodnie z CSS 2.1 wynik jest nieokreślony.
none: (Dotyczy tylko własności 'max-width') Szerokość pola jest nieograniczona.

Własności 'min-width' i 'max-width' nie przyjmują wartości ujemnych.

Poniższy algorytm opisuje wpływ tych własności na wartość używaną własności 'width':

Wstępna szerokość używana jest obliczana (bez własności 'min-width' i 'max-width') zgodnie z zasadami w podrozdziale "Obliczanie szerokości i marginesów".
Jeśli ta wartość będzie większa od wartości własności 'max-width', powyższe zasady zostaną zastosowane jeszcze raz, ale tym razem przy użyciu wartości obliczonej własności 'max-width' jako wartości obliczonej własności 'width'.
Jeśli ta wartość będzie mniejsza od wartości własności 'min-width', powyższe zasady zostaną zastosowane jeszcze raz, ale tym razem przy użyciu wartości obliczonej własności 'min-width' jako wartości obliczonej własności 'width'.

Działania te nie mają wpływu na rzeczywiste wartości obliczone powyższych własności.

Dla elementów zastępowanych mających wewnętrzny współczynnik proporcji i których własności 'width' i 'height' mają wartość 'auto', algorytm jest następujący:

wybierz z tabeli wydedukowaną wysokość i szerokość dla odpowiedniego naruszenia ograniczeń. Weź max-width i max-height jako max(min, max), aby warunek min ≤ max był spełniony. W tabeli tej w i h oznaczają wyniki obliczeń szerokości i wysokości przy zignorowaniu własności 'min-width', 'min-height', 'max-width' oraz 'max-height'. Normalnie są to szerokość i wysokość wewnętrzna, ale w przypadku elementów zastępowanych z wewnętrznymi współczynnikami może być inaczej.

Uwaga: Jeśli szerokość lub wysokość zostanie ustawiona jawnie a drugi z tych wymiarów będzie miał wartość 'auto', zastosowanie minimalnego lub maksymalnego ograniczenia po stronie 'auto' może spowodować sytuację nadmiernego ograniczenia. Może to nie być to, o co chodziło autorowi. W CSS 3 można użyć własności 'image-fit', aby uzyskać inny wynik w takiej sytuacji.

Naruszenie ograniczenia	Wydedukowana szerokość	Wydedukowana wysokość
brak	`w`	`h`
`w > max-width`	`max-width`	`max(max-width * h/w, min-height)`
`w < min-width`	`min-width`	`min(min-width * h/w, max-height)`
`h > max-height`	`max(max-height * w/h, min-width)`	`max-height`
`h < min-height`	`min(min-height * w/h, max-width)`	`min-height`
(`w > max-width`) i (`h > max-height`), gdzie (`max-width/w ≤ max-height/h`)	`max-width`	`max(min-height, max-width * h/w)`
(`w > max-width`) i (`h > max-height`), gdzie (`max-width/w > max-height/h`)	`max(min-width, max-height * w/h)`	`max-height`
(`w < min-width`) i (`h < min-height`), gdzie (`min-width/w ≤ min-height/h`)	`min(max-width, min-height * w/h)`	`min-height`
(`w < min-width`) i (`h < min-height`), gdzie (`min-width/w > min-height/h`)	`min-width`	`min(max-height, min-width * h/w)`
(`w < min-width`) i (`h > max-height`)	`min-width`	`max-height`
(`w > max-width`) i (`h < min-height`)	`max-width`	`min-height`

Następnie należy zastosować zasady opisane w podrozdziale "Obliczanie szerokości i marginesów", tak, jakby wartość własności 'width' została obliczona jako ta wartość.

10.5 Wysokość treści: własność 'height'

'height'

Wartość:	<length> \| <percentage> \| auto \| inherit
Wartość domyślna:	auto
Zastosowanie:	wszystkie elementy z wyjątkiem niezastępowanych elementów śródliniowych, kolumn tabeli oraz grup kolumn
Dziedziczenie:	nie
Wartości procentowe:	zobacz tekst poniżej
Media:	wizualne
Wartość obliczana:	procent lub 'auto (zobacz <percentage>) lub wartość bezwzględna; 'auto' jeśli własność nie ma zastosowania

Własność ta służy do określania wysokości treści pól wygenerowanych przez elementy blokowe, śródliniowo-blokowe oraz zastępowane.

Własność ta nie dotyczy niezastępowanych elementów śródliniowych. Zobacz podrozdział o obliczaniu wysokości i marginesów niezastępowanych elementów śródliniowych.

Opis wartości:

<length>: Służy do określania wysokości obszaru treści za pomocą jednostek długości.
<percentage>: Określa wysokość procentowo. Procent jest obliczany na podstawie wysokości bloku zawierającego generowane pole. Jeśli wysokość bloku zawierającego nie zostanie określona jawnie (tzn. zależy od wysokości treści) i element ten nie jest pozycjonowany bezwzględnie, wartość ta zostanie ustawiona na 'auto'. Wartość procentowa wysokości elementu głównego odnosi się do pierwotnego bloku zawierającego. Uwaga: Wartość procentowa określająca wysokość elementów pozycjonowanych bezwzględnie, których blok zawierający stanowi element blokowy jest obliczana w odniesieniu do wysokości pola dopełnienia tego elementu. Jest to zmiana w stosunku do CSS 1, gdzie szerokość wyrażona w procentach zawsze była obliczana w odniesieniu do pola treści elementu rodzica.
auto: Wysokość zależy od wartości innych własności. Zobacz niżej.

Należy zauważyć, że wysokość bloku zawierającego elementu pozycjonowanego bezwzględnie jest niezależna od rozmiaru samego elementu, dzięki czemu wysokość wyrażoną w procentach takiego elementu zawsze można wydedukować. Wysokość ta może być jednak znana dopiero po przetworzeniu dalszych elementów.

Własność 'height' nie przyjmuje wartości ujemnych.

Poniższa reguła ustawia wysokość treści akapitów na 100 pikseli:

p { height: 100px }

Zawartość której wysokość przekroczy 100 pikseli zachowa się zgodnie z ustawieniami własności 'overflow'.

10.6 Obliczanie wysokości i marginesów

Na potrzeby obliczania wartości własności 'top', 'margin-top', 'height', 'margin-bottom' oraz 'bottom' należy rozróżnić kilka różnych rodzajów pól:

elementy śródliniowe niezastępowane
elementy śródliniowe zastępowane
elementy blokowe niezastępowane w układzie normalnym
elementy blokowe zastępowane w układzie normalnym
elementy pływające niezastępowane
elementy pływające zastępowane
elementy niezastępowane pozycjonowane bezwzględnie
elementy zastępowane pozycjonowane bezwzględnie
elementy blokowo-śródliniowe niezastępowane w układzie normalnym
elementy blokowo-śródliniowe zastępowane w układzie normalnym

Punkty 1-6 i 9-10: wartości własności 'top' i 'bottom' są określane wg zasad opisanych w podrozdziale 9.4.3

Uwaga: zasady te dotyczą elementu głównego w takim samym stopniu, jak wszystkich innych elementów.

10.6.1 Elementy śródliniowe niezastępowane

Własność 'height' nie dotyczy. Wysokość obszaru treści powinna być obliczana na podstawie rozmiaru pisma, ale specyfikacja ta nie uściśla jak dokładnie powinno się to odbywać. Aplikacja kliencka może np. użyć rozmiaru pola zajmowanego przez glif w foncie albo linii górnej i dolnej fontu. (W drugim z wymienionych przypadków byłoby pewne, że glify, których fragmenty wystają poza wyznaczone dla glifu pole i tak mieściłyby się w obszarze treści. Jednak dla różnych fontów powstawałyby pola o różnych rozmiarach. Pierwszy przypadek natomiast daje możliwość kontrolowania stylu tła względem wysokości linii ['line-height'], ale fragmenty glifów mogłyby wystawać poza obszar treści.)

Uwaga: w CSS 3 prawdopodobnie zostanie dodana własność umożliwiająca wybór miary fontu, wg której ma być obliczana wysokość treści.

Przy górnej i dolnej krawędzi obszaru treści śródliniowego niezastępowanego pola swój początek mają dopełnienie pionowe, obramowanie i margines, a nie wysokość linii. Natomiast do obliczania wysokości pola liniowego używana jest tylko wysokość linii.

Jeśli zostanie użytych więcej fontów niż jeden, (może się to zdarzyć, gdy glify są brane z różnych fontów), wysokość obszaru treści jest wg tej specyfikacji niezdefiniowana. Zalecamy jednak określanie takiej wysokości, aby obszar treści był wystarczająco wysoki, by pomieścić albo (1) pola glifów albo (2) linie górną i dolną wszystkich fontów użytych w elemencie. Należy zauważyć, że może to być wartość większa od największego użytego rozmiaru pisma — zależy to od wyrównania linii bazowych pisma fontów.

10.6.2 Elementy śródliniowe zastępowane, elementy blokowe zastępowane w układzie normalnym, elementy blokowo-śródliniowe zastępowane w układzie normalnym oraz elementy pływające zastępowane

Jeśli własność 'margin-top' lub 'margin-bottom' ma wartość obliczoną 'auto', jej wartość używana wynosi '0'.

Jeśli własności 'height' i 'width' mają wartości obliczone 'auto' i element ma wysokość wewnętrzną, wysokość ta jest wartością używaną własności 'height'.

Jeśli natomiast własność 'height' ma wartość obliczoną 'auto' i element ma wewnętrzny współczynnik proporcji, wówczas wartością używaną własności 'height' jest:

(szerokość używana) / (współczynnik wewnętrzny)

Jeśli natomiast własność 'height' ma wartość obliczoną 'auto' i element ma wysokość wewnętrzną, wówczas ta właśnie wysokość jest wartością używaną własności 'height'.

W pozostałych przypadkach, jeśli własność 'height' ma wartość obliczoną 'auto', ale żaden z powyższych warunków nie jest spełniony, wartość używana własności 'height' musi zostać ustawiona na wysokość największego prostokąta o współczynniku 2:1, wysokości nie większej niż 150 px oraz szerokości nie większej niż szerokość urządzenia.

Wewnętrzne wysokości procentowe są ewaluowane w odniesieniu do wysokości bloku zawierającego, jeśli wysokość ta jest określona jawnie, lub jeśli element zastępowany jest pozycjonowany bezwzględnie. Jeśli żaden z tych warunków nie jest spełniony, wartości procentowej takich elementów zastępowanych nie da się wydedukować i zostaje przyjęte, że nie mają one wysokości wewnętrznej.

W przypadku elementów śródliniowych i śródliniowo-blokowych do obliczania wysokości pola liniowego używane jest pole marginesu.

10.6.3 Elementy blokowe niezastępowane w układzie normalnym, gdy wartość własności 'overflow' wynosi 'visible'

Podrozdział ten dotyczy także blokowych elementów niezastępowanych w układzie normalnym, których własność 'overflow' nie wynosi 'visible', ale została rozpropagowana na obszar widoku.

Jeśli własności 'margin-top' lub 'margin-bottom' mają wartość 'auto', ich wartość używana wynosi 0. Jeśli własność 'height' ma wartość 'auto', wysokość zależy od tego, czy element zawiera elementy blokowe oraz, czy ma określone dopełnienie i obramowanie:

Jeśli element ma dzieci tylko śródliniowe, wysokością jest odległość między górną krawędzią najwyżej znajdującego się pola liniowego a dolną krawędzią pola liniowego znajdującego się najniżej.

Jeśli element zawiera elementy blokowe, jego wysokością jest odległość od górnej krawędzi obramowania znajdującego się najwyżej dziecka blokowego, przez które nie są scalane marginesy a dolną krawędzią obramowania dziecka blokowego znajdującego się najniżej, przez które nie są scalane marginesy. Jeśli jednak element ten ma niezerowe dopełnienie i/lub niezerową górną krawędź obramowania, albo jest elementem głównym, jego treść zaczyna się od górnej krawędzi marginesu najwyżej położonego dziecka. (W pierwszym przypadku został wyrażony fakt, że marginesy górny i dolny elementu zostają scalone z marginesami jego pierwszego i ostatniego dziecka. W drugim przypadku wyrażony jest fakt, że obecność dopełnienia lub obramowania zapobiega scalaniu marginesów górnych.) Analogicznie, jeśli margines dolny bloku nie zostanie scalony z marginesem dolnym jego ostatniego dziecka typu 'in-flow', treść kończy się na dolnej krawędzi marginesu ostatniego dziecka.

Pod uwagę brane są tylko dzieci znajdujące się w normalnym układzie (tzn. pola pływające i pola pozycjonowane bezwzględnie są ignorowane, a pola pozycjonowane względnie są brane pod uwagę bez przesunięć). Należy zauważyć, że dziecko może być anonimowym polem blokowym.

10.6.4 Elementy niezastępowane pozycjonowane bezwzględnie

Na potrzeby tego i następnego podrozdziału, termin "położenie statyczne" (elementu) oznacza, z grubsza, położenie, jakie element miałby w układzie normalnym. Położenie statyczne dla własności 'top' to odległość od górnej krawędzi bloku zawierającego do górnej krawędzi marginesu hipotetycznego pola, które byłoby pierwszym polem elementu, gdyby jego własność 'position' miała wartość 'static' a własności 'float' i 'clear' — 'none'. (Należy zauważyć, że ze względu na zasady opisane w podrozdziale 9.7 te hipotetyczne obliczenia mogą dodatkowo wymagać przypuszczalnego przyjęcia innej wartości obliczonej dla własności 'display'.) Jeśli hipotetyczne pole znajduje się powyżej bloku zawierającego, wartość ta jest ujemna.

Aplikacje klienckie zamiast obliczać wymiary tego hipotetycznego bloku, mogą spróbować zgadnąć jego prawdopodobne położenie.

Dla celów obliczania położenia statycznego blok zawierający elementów pozycjonowanych stale to pierwotny blok zawierający, a nie obszar widoku.

W elementach pozycjonowanych bezwzględnie wartości używane wymiarów pionowych muszą spełniać następujący warunek:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = wysokość bloku zawierającego

Jeśli własności 'top', 'height' i 'bottom' mają wartość 'auto', własność 'top' zostaje ustawiona na położenie statyczne i zostaje zastosowana zasada nr 3 z poniższej listy.

Jeśli żadna z tych trzech własności nie ma wartości 'auto': Jeśli 'margin-top' i 'margin-bottom' mają wartość 'auto', należy rozwiązać równanie z dodatkowym warunkiem, że oba te marginesy muszą uzyskać taką samą wartość. Jeśli tylko własność 'margin-top' lub 'margin-bottom' ma wartość 'auto', równanie zostanie rozwiązane dla tej wartości. Jeśli wartości są nadmiernie ograniczone, należy zignorować wartość 'bottom' i rozwiązać równanie dla niej.

W przeciwnym przypadku należy wybrać odpowiednią z poniższych sześciu zasad.

Własności 'top' i 'height' mają wartość 'auto' a 'bottom' nie ma wartości 'auto' — obliczanie wysokości opiera się na treści, wartości 'auto' własności 'margin-top' i 'margin-bottom' zostają ustawione na '0', i równanie zostaje rozwiązane dla 'top'.
Własności 'top' i 'bottom' mają wartość 'auto' a 'height' nie ma wartości 'auto' — własność 'top' zostaje ustawiona na położenie statyczne, wartości 'auto' własności 'margin-top' i 'margin-bottom' zostają ustawione na 0, i równanie zostaje rozwiązane dla 'bottom'.
Własności 'height' i 'bottom' mają wartość 'auto' a 'top' nie ma wartości 'auto' — obliczanie wysokości opiera się na treści, wartości 'auto' własności 'margin-top' i 'margin-bottom' zostają ustawione na 0, i równanie zostaje rozwiązane dla 'bottom'.
Własność 'top' ma wartość 'auto', a 'bottom' — nie — wartości 'auto' własności 'margin-top' i 'margin-bottom' zostają ustawione na 0 i równanie zostaje rozwiązane dla 'top'.
Własność 'height' ma wartość 'auto', a własności 'top' i 'bottom' — nie — wartości 'auto' własności 'margin-top' i 'margin-bottom' zostają ustawione na 0 i równanie zostaje rozwiązane dla 'height'.
Własność 'bottom' ma wartość 'auto', a własności 'top' i 'height' — nie — wartości 'auto' własności 'margin-top' i 'margin-bottom' zostają ustawione na 0 i równanie zostaje rozwiązane dla 'bottom'.

10.6.5 Elementy zastępowane pozycjonowane bezwzględnie

Ta sytuacja jest podobna do poprzedniej. Różnica polega na tym, że element ma wysokość wewnętrzną. Sekwencja podstawień jest następująca:

Wartość używana własności 'height' jest określana tak samo, jak dla śródliniowych elementów zastępowanych. Jeśli własność 'margin-top' lub 'margin-bottom' ma wartość określoną 'auto', jej wartość używana jest obliczana wg zasad opisanych poniżej.
Jeśli własności 'top' i 'bottom' mają wartość 'auto', własność 'top' zostaje zastąpiona położeniem statycznym elementu.
Jeśli własność 'bottom' ma wartość 'auto', wartości 'auto' własności 'margin-top' lub 'margin-bottom' są zamieniane na '0'.
Jeśli w tym momencie własności 'margin-top' i 'margin-bottom' nadal mają wartość 'auto', należy rozwiązać równanie z dodatkowym warunkiem, że oba te marginesy muszą uzyskać taką samą wartość.
Jeśli na tym etapie pozostała tylko jedna wartość 'auto', równanie należy rozwiązać dla tej wartości.
Jeśli na tym etapie wartości są nadmiernie ograniczone, należy zignorować wartość 'bottom' i rozwiązać równanie dla niej.

10.6.6 Skomplikowane przypadki

Ten podrozdział dotyczy:

Blokowych elementów niezastępowanych w układzie normalnym, gdy wartość obliczona własności 'overflow' nie wynosi 'visible' (z wyjątkiem sytuacji rozpropagowania wartości własności 'overflow' do obszaru widoku).
Elementów śródliniowo-blokowych niezastępowanych.
Elementów pływających niezastępowanych.

Jeśli własności 'margin-top' lub 'margin-bottom' mają wartość 'auto', ich wartość używana wynosi '0'. Jeśli własność 'height' ma wartość 'auto', wysokość zależy od potomków elementu.

W przypadku elementów śródliniowo-blokowych do obliczania wysokości pola liniowego używane jest pole marginesu.

10.6.7 Automatyczna wysokość dla głównego kontekstu formatowania blokowego

W niektórych przypadkach (zobacz powyższe podrozdziały) wysokość elementu jest obliczana w następujący sposób:

Jeśli element ma dzieci blokowe, wysokość jest równa odległości górnej krawędzi marginesu znajdującego się najwyżej dziecka blokowego a krawędzią dolną dziecka blokowego znajdującego się najniżej.

Dzieci pozycjonowane bezwzględnie są ignorowane a pola pozycjonowane bezwzględnie są brane pod uwagę bez przesunięć. Należy zauważyć, że dziecko może być anonimowym polem blokowym.

Dodatkowo, jeśli element ma pływającego potomka, którego dolna krawędź marginesu wychodzi poza dolną krawędź elementu, wysokość zostaje zwiększona, aby cały potomek się zmieścił w swoim elemencie. Brane są pod uwagę tylko dzieci samego elementu oraz dzieci potomków należących do układu normalnego. Na przykład elementy pływające znajdujące się w potomkach pozycjonowanych bezwzględnie nie są brane pod uwagę.

10.7 Szerokość minimalna i maksymalna: 'min-height' i 'max-height'

W pewnych sytuacjach konieczne jest ograniczenie wysokości elementów do pewnego zakresu. Do tego celu służą dwie własności:

'min-height'

Wartość:	<length> \| <percentage> \| inherit
Wartość domyślna:	0
Zastosowanie:	wszystkie elementy z wyjątkiem niezastępowanych elementów śródliniowych, kolumn tabeli oraz grup kolumn
Dziedziczenie:	nie
Wartości procentowe:	zobacz tekst poniżej
Media:	wizualne
Wartość obliczana:	procent zgodnie z podaną wartością lub jednostka bezwzględna

'max-height'

Wartość:	<length> \| <percentage> \| none \| inherit
Wartość domyślna:	none
Zastosowanie:	wszystkie elementy z wyjątkiem niezastępowanych elementów śródliniowych, kolumn tabeli oraz grup kolumn
Dziedziczenie:	nie
Wartości procentowe:	zobacz tekst poniżej
Media:	wizualne
Wartość obliczana:	procent zgodnie z podaną wartością lub jednostka bezwzględna lub 'none'

Te dwie własności umożliwiają ograniczenie wysokości treści do określonego zakresu. Opis wartości:

<length>: Służy do określenia minimalnej lub maksymalnej wysokości obliczonej.
<percentage>: Służy do procentowego określania wartości używanej. Procent jest obliczany na podstawie wysokości bloku zawierającego generowane pole. Jeśli wysokość bloku zawierającego nie jest jawnie określona (tzn. zależy od wysokości treści) i element ten nie jest pozycjonowany bezwzględnie, wartość procentowa jest traktowana jako '0' (w przypadku własności 'min-height') lub 'none' (w przypadku własności 'max-height').
none: (Dotyczy tylko własności 'max-height') Wysokość pola jest nieograniczona.

Własności 'min-height' i 'max-height' nie przyjmują wartości ujemnych.

Poniższy algorytm opisuje wpływ tych własności na wartość używaną własności 'height':

Wstępna wysokość używana jest obliczana (bez własności 'min-height' i 'max-height') zgodnie z zasadami w podrozdziale "Obliczanie wysokości i marginesów".
Jeśli ta wartość będzie mniejsza od wartości własności 'max-height', powyższe zasady zostaną zastosowane jeszcze raz, ale tym razem przy użyciu wartości własności 'max-height' jako wartości obliczonej własności 'height'.
Jeśli ta wartość będzie mniejsza od wartości własności 'min-height', powyższe zasady zostaną zastosowane jeszcze raz, ale tym razem przy użyciu wartości własności 'min-height' jako wartości obliczonej własności 'height'.

Działania te nie mają wpływu na rzeczywiste wartości obliczone powyższych własności. Zmiana używanej wartości własności 'height' nie ma wpływu na scalanie marginesów z wyjątkiem sytuacji, gdy jest to wymagane przez zasady dotyczące własności 'min-height' lub 'max-height' opisane w podrozdziale "Scalanie marginesów" (8.3.1).

Natomiast dla elementów zastępowanych, których własności 'width' i 'height' mają obie wartości 'auto', do określenia szerokości i wysokości używanej należy zastosować algorytm opisany w podrozdziale Szerokość minimalna i maksymalna. Następnie należy zastosować zasady opisane w podrozdziale "Obliczanie wysokości i marginesów" i użyć uzyskanych w ten sposób szerokości i wysokości jako wartości obliczonych.

10.8 Obliczanie wysokości linii: własności 'line-height' i 'vertical-align'

Jak napisano w podrozdziale o kontekstach formatowania śródliniowego, aplikacje klienckie układają pola śródliniowe w stosy tzw. pól liniowych. Wysokość pola liniowego jest określana następująco:

Zostaje obliczona wysokość każdego pola śródliniowego w polu liniowym (zobacz "Obliczanie wysokości i marginesów" i własność 'line-height').
Pola liniowe zostają ustawione w pionie zgodnie z ustawieniami ich własności 'vertical-align'.
Wysokość pola liniowego jest równa odległości między górną krawędzią pierwszego od góry pola a dolną krawędzią ostatniego pola.
Jeśli wysokość ta jest mniejsza od minimalnej wysokości pól liniowych w bloku, określonej przez własność 'line-height', zostaje ona odpowiednio zwiększona.

Puste elementy śródliniowe generują puste pola śródliniowe. Pola te mają swoje marginesy, dopełnienie, obramowanie i wysokość linii, które mają taki sam wpływ na obliczenia, jak te same własności elementów zawierających treść.

10.8.1 Leading i pół-leading

Ponieważ wartość własności 'line-height' pola śródliniowego może być inna niż wysokość jego obszaru treści, nad i pod glifami może znajdować się pusta przestrzeń. Różnica między wysokością treści a wartością używaną własności 'line-height' nazywa się leadingiem. Połowa wartości leadingu nazywa się pól-leadingiem.

Aplikacje klienckie ustawiają glify centralnie w pionie w polu śródliniowym dodając pól-leading u góry i u dołu. Jeśli np. fragment tekstu ma wysokość '12px' a wysokość linii ('line-height') wynosi '14px', powinny zostać 2 piksele dodatkowej przestrzeni: 1 px nad i 1px pod literami. (Dotyczy to także pól pustych, tak jakby zawierały nieskończenie wąską literę.)

Gdy wartość własności 'line-height' jest mniejsza niż wysokość treści, ostateczna wysokość pola śródliniowego będzie mniejsza od rozmiaru pisma i glify "wyciekną" poza pole. Jeśli pole takie styka się z krawędzią pola liniowego, glify "wyciekną" do tego pola.

Mimo że marginesy, obramowanie i dopełnienie elementów niezastępowanych nie są brane pod uwagę przy obliczaniu pola liniowego, są obecne wokół pól śródliniowych. Oznacza to, że jeśli wysokość określona przez własność 'line-height' jest mniejsza od wysokości treści zawieranych pól, tła i kolory dopełnienia mogą "wycieknąć" do przylegających pól liniowych. Aplikacje klienckie powinny te pola prezentować w takiej kolejności, jak w dokumencie. Dzięki temu obramowanie dalszych linii zostanie narysowane na obramowaniu i tekście wcześniejszych linii.

'line-height'

Wartość:	normal \| <number> \| <length> \| <percentage> \| inherit
Wartość domyślna:	normal
Zastosowanie:	wszystkie elementy
Dziedziczenie:	tak
Wartości procentowe:	odnoszą się do rozmiaru pisma elementu
Media:	wizualne
Wartość obliczana:	dla <length> i <percentage> wartość bezwzględna; w pozostałych przypadkach taka, jaką określono

W elementach blokowych, 'table-cell', 'table-caption' oraz śródliniowo-blokowych, których treść składa się wyłącznie z elementów śródliniowych własność 'line-height' określa minimalną wysokość zawieranych przez nie pól liniowych. Ta minimalna wysokość jest równa minimalnej przestrzeni nad linią bazową bloku i minimalnej przestrzeni pod nią, tak jakby każde pole liniowe było na początku polem śródliniowym o zerowej szerokości z własnościami pisma i wysokości linii takimi, jak bloku (w T_EX nazywane jest to "podporą" [strut]).

W elementach śródliniowych własność 'line-height' określa wysokość używaną w obliczeniach wysokości pola liniowego (z wyjątkiem śródliniowych elementów zastępowanych, w których wysokość pola określa własność 'height').

Opis wartości:

normal: Aplikacja kliencka ustawia "rozsądną" wartość używaną na podstawie pisma elementu. Wartość ta ma takie same znaczenie, jak <number>. Zalecamy stosowanie wartości z przedziału 1.0-1.2 jako odpowiednika wartości 'normal'. Wartość obliczona to 'normal'.
<length>: W obliczeniach wysokości pola liniowego wykorzystywana jest określona długość. Wartości ujemne są niedozwolone.
<number>: Wartość używana własności jest równa tej liczbie pomnożonej przez rozmiar pisma elementu. Wartości ujemne są niedozwolone. Wartość obliczona jest taka sama, jak wartość określona.
<percentage>: Wartość obliczona własności jest równa temu ułamkowi pomnożonemu przez obliczony rozmiar pisma elementu. Wartości ujemne są niedozwolone.

Wszystkie trzy poniższe reguły określają taką samą wysokość linii:

div { line-height: 1.2; font-size: 10pt }     /* liczba */
div { line-height: 1.2em; font-size: 10pt }   /* długość */
div { line-height: 120%; font-size: 10pt }    /* procent */

Jeśli element zawiera tekst składający się z liter napisanych więcej niż jednym fontem, aplikacje klienckie mogą wartość własności 'line-height' określić według największego rozmiaru pisma.

Ogólnie rzecz biorąc, jeśli wszystkie pola śródliniowe w akapicie mają taką samą wartość własności 'line-height' (i nie ma żadnych wysokich obrazów), powyższa zasada zapewnia, że linie bazowe kolejnych linii są od siebie oddalone dokładnie o wartość 'line-height'. Jest to ważne w przypadkach, gdy trzeba wyrównać kolumny tekstu napisane przy użyciu różnych fontów, np. w tabeli.

'vertical-align'

Wartość:	baseline \| sub \| super \| top \| text-top \| middle \| bottom \| text-bottom \| <percentage> \| <length> \| inherit
Wartość domyślna:	baseline
Zastosowanie:	elementy śródliniowe i 'table-cell'
Dziedziczenie:	nie
Wartości procentowe:	odnoszą się do wysokości linii ('line-height') elementu
Media:	wizualne
Wartość obliczana:	dla <percentage> i <length> wartość bezwzględna; w pozostałych przypadkach taka, jaką określono

Własność ta służy do pionowego pozycjonowania pól wygenerowanych przez elementy śródliniowe w polach liniowych.

Uwaga: wartości tej własności w tabelach mają inne znaczenie. Szczegółowe informacje na ten temat można znaleźć w podrozdziale o algorytmach obliczania wysokości tabeli.

Poniższe wartości mają znaczenie tylko w odniesieniu do nadrzędnego elementu śródliniowego lub podpory (strut) nadrzędnego elementu blokowego, 'table-cell', 'table-caption' lub śródliniowo-blokowego.

baseline: Wyrównuje linię bazową pola z linią bazową pola rodzica. Jeśli pole nie ma linii bazowej, z linią bazową rodzica zostanie wyrównana jego dolna krawędź marginesu.
middle: Wyrównuje linię przechodzącą przez pionowy środek pola z linią wyznaczoną jako bazowa linia pola rodzica plus połowa linii środkowej rodzica.
sub: Obniża linię bazową pola do indeksu dolnego w polu rodzica. (Wartość ta nie ma wpływu na rozmiar pisma w tekście elementu).
super: Podnosi linię bazową pola do indeksu górnego w polu rodzica. (Wartość ta nie ma wpływu na rozmiar pisma w tekście elementu).
text-top: Wyrównuje górną krawędź pola z górną krawędzią obszaru treści rodzica (zobacz 10.6.1).
text-bottom: Wyrównuje dolną krawędź pola z dolną krawędzią obszaru treści rodzica (zobacz 10.6.1).
<percentage>: Podnosi (wartość dodatnia) lub opuszcza (wartość ujemna) pole o określoną wartość (ułamek wartości własności 'line-height'). Wartość '0%' jest równoważna z wartością 'baseline'.
<length>: Podnosi (wartość dodatnia) lub opuszcza (wartość ujemna) pole o określoną wartość. Wartość '0cm' jest równoważna z wartością 'baseline'.

Poniższe wartości wyrównują element względem pola liniowego. Ponieważ element może mieć dzieci, które są wyrównane względem niego (które z kolei mogą mieć potomków wyrównanych względem nich), wartości te używają granic wyrównywanego poddrzewa. Poddrzewo wyrównywane elementu śródliniowego składa się z samego elementu i wyrównanych poddrzew wszystkich śródliniowych elementów dziecka, których obliczona wartość 'vertical-align' wynosi 'top' lub 'bottom'. Górna krawędź wyrównanego poddrzewa znajduje się najwyżej z wszystkich górnych krawędzi pól w poddrzewie. To samo dotyczy krawędzi dolnej.

top: Wyrównuje górną krawędź poddrzewa wyrównywanego z górną krawędzią pola liniowego.
bottom: Wyrównuje dolną krawędź poddrzewa wyrównywanego z dolną krawędzią pola liniowego.

Linia bazowa pola typu 'inline-table' to linia bazowa pierwszego wiersza tabeli.

Linia bazowa bloku śródliniowego to linia bazowa jego ostatniego pola liniowego należącego do układu normalnego. Jeśli jednak blok taki nie ma pól liniowych 'in-flow' lub jego własność 'overlow' ma wartość obliczoną inną niż 'visible', jego linią bazową jest dolna krawędź marginesu.