Rozmiary

W tym rozdziale dowiesz się...

• Jak wyznaczyć element, względem którego obliczana jest pozycja i rozmiary elementów?
• W jaki sposób najprościej ustawić szerokość elementu?
• W jaki sposób najprościej ustawić wysokość elementu?
• Co zrobić, aby szerokość i poziome marginesy dopasowywały się do sąsiednich elementów, tak aby wyświetlanie zawsze było poprawne? W jaki sposób wyśrodkować (wycentrować) tabelkę lub blok za pomocą CSS? Jak zbudować szkielet strony przy pomocy CSS?
• Co zrobić, aby wysokość i pionowe marginesy dopasowywały się do sąsiednich elementów, tak aby wyświetlanie zawsze było poprawne?
• Co zrobić, aby szerokość elementu nigdy nie przekroczyła ustalonej wartości?
• Co zrobić, aby szerokość elementu nigdy nie była mniejsza od ustalonej wartości?
• Co zrobić, aby wysokość elementu nigdy nie przekroczyła ustalonej wartości?
• Co zrobić, aby wysokość elementu nigdy nie była mniejsza od ustalonej wartości?
• W jaki sposób dodać suwaki przewijania do dowolnego elementu? Co zrobić, aby zawartość elementu nigdy nie wychodziła poza jego obręb?
• W jaki sposób zablokować możliwość zmiany rozmiaru (przeciągania) obszaru tekstowego w formularzu?

Blok obejmujący

Pozycja i rozmiar pudełka elementu są czasami obliczane względem pewnego prostokąta zwanego blokiem obejmującym (ang. "containing block"):

1. Blok obejmujący w którym znajduje się element podstawowy (ang. "root") jest wyznaczany przez przeglądarkę (np. okno). Ten blok nazywany jest początkowym blokiem obejmującym.
2. Dla innych elementów, które mają ustalone pozycjonowanie relatywne lub statyczne blok obejmujący jest tworzony przez najbliższy blok, komórkę tabeli lub inline-block będący przodkiem dla danego elementu.
3. Jeśli element jest pozycjonowany w sposób ustalony, blok obejmujący wyznacza okno przeglądarki.
4. Jeśli element jest pozycjonowany absolutnie, blok obejmujący jest wyznaczony przez najbliższego przodka z pozycjonowaniem absolutnym, relatywnym lub ustalonym w następujący sposób:
   • Jeśli przodek jest wyświetlany jako inline-block i kierunek tekstu (direction) jest określony jako ltr (od lewej do prawej) góra i lewa strona bloku obejmującego jest górną i lewą krawędzią zawartości pierwszego pudełka utworzonego przez przodka, natomiast dół i prawa krawędź jest dolną i prawą krawędzią zawartości ostatniego pudełka przodka.
   • W przypadku kierunku tekstu rtl (od prawej do lewej) wszystko jest odwrotnie.
5. W przeciwnym razie obejmujący blok jest tworzony przez krawędzie marginesu wewnętrznego (padding) przodka.

Szerokość

selektor { width: szerokość }

Polecenie nie odnosi się do elementów inline!

Polecenie to pozwala ustalić dokładną szerokość różnych elementów (np. akapitu, wykazu, poziomej linii, tabeli, obrazka itd.).

Przykład:

To jest akapit o szerokości 30% (width: 30%).

To jest wykaz o szerokości 5em (width: 5em):

• Punkt pierwszy
• Punkt drugi

To jest tabela o szerokości 100px (width: 100px)

Poniżej widać obrazek o szerokości 200px (width: 200px):

Wysokość

selektor { height: wysokość }

Polecenie nie odnosi się do elementów inline!

Polecenie to pozwala ustalić dokładną wysokość różnych elementów (np. akapitu, wykazu, poziomej linii, tabeli, obrazka itd.).

Przykład:

To jest akapit o wysokości 5cm (height: 5cm).

To jest wykaz o wysokości 20em (height: 20em):

• Punkt pierwszy
• Punkt drugi

To jest tabela o wysokości 100px (height: 100px)

Poniżej widać obrazek o wysokości 40px (height: 40px):

Szerokość i marginesy automatyczne

Podanie wartości auto dla własności określającej szerokość elementu (width) lub jego marginesy (margin-left, margin-right) pozwala dopasować wybrany tą metodą wymiar w taki sposób, aby element poprawnie wyświetlił się w każdych warunkach. Poniżej znajdziesz opis wyznaczania szerokości i marginesów automatycznych dla różnych typów elementów w różnych przypadkach. Nie musisz od razu nauczyć się wszystkich zasad na pamięć, jednak wskazane jest przynajmniej przejrzenie poniższych opisów tak, aby w razie wątpliwości w przyszłości wiedzieć gdzie szukać wyjaśnienia.

Zdaję sobie sprawę, że przedstawione tutaj wzory i algorytmy obliczania pozycji mogą być mało mówiące i na początku trudne do przyswojenia. Dlatego raczej nie zalecam ślęczenia nad nimi teraz bez końca. Jeśli w przyszłości napotkasz problemy z wartością auto przypisaną dla szerokości lub poziomych marginesów, odszukaj ten rozdział, a następnie punkt, który odpowiada przypadkowi, z którym się będziesz borykać. Wtedy to już nie będzie "sucha" teoria, ale od razu zastosowanie praktyczne w konkretnym przykładzie, a więc dużo łatwiej będzie to sobie przyswoić.

Przed dalszą lekturą tego podrozdziału warto zwrócić uwagę na wartości domyślne, jakie przyjmują poszczególne własności, kiedy nie przypisze się im żadnych innych. Na przykład, jeżeli nie ustalimy marginesów elementu, przyjmą one wartości 0 (zero), co jest dosyć logiczne. To samo dotyczy marginesów wewnętrznych (padding) - przyjmują domyślną wartość zero. Jeżeli natomiast chodzi o szerokość, to domyślnie wcale nie przyjmuje wartości 100% - jak można by sądzić - ale auto. Zapamiętaj tę zasadę, bo dzięki temu unikniesz wielu nieporozumień.

Przedstawione poniżej punkty 1-6 oraz 9-10 obejmują również elementy pozycjonowane relatywnie.

1. Elementy inline, nie-zastępowane

Przykład: SPAN, B, I i inne (ale nie IMG, INPUT, TEXTAREA, SELECT, OBJECT, które są elementami zastępowanymi).

Własność width nie ma zastosowania (nie można jej przypisać). Podanie wartości auto dla left, right, margin-left lub margin-right oznacza przyjęcie dla nich ostatecznej wartości zero.

2. Elementy inline, zastępowane

Przykład: IMG, INPUT, TEXTAREA, SELECT, OBJECT.

Podanie wartości auto dla margin-left lub margin-right oznacza przyjęcie dla nich ostatecznej wartości zero. Jeżeli width i jednocześnie height są ustawione jako auto, wewnętrzna szerokość staje się ostateczną wartością szerokości elementu. Ponadto w CSS 2.1 jeśli width ma wartość auto, a height ma inną wartość, ostateczna wartość szerokości jest obliczana ze wzoru:

(szerokość wewnętrzna) * ( (ustawiona wysokość) / (wewnętrzna wysokość) )

co oznacza po prostu przeskalowanie elementu tak, aby zachował on swoje proporcje.

3. Elementy blokowe, nie-zastępowane

Przykład: DIV i inne.

Elementy takie muszą spełniać następujące równanie:

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

Jeżeli 'width' nie ma przypisanej wartości auto, a suma 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (plus 'margin-left' lub 'margin-right' nieposiadające wartości auto) jest większa od szerokości bloku obejmującego, to każda wartość auto przypisana do 'margin-left' lub 'margin-right' jest traktowana jako zero (CSS 2.1).

Jeżeli wszystkie z powyższych własności mają przypisaną wartość auto, a kierunek tekstu (direction) jest ustawiony jako "ltr" (od lewej do prawej), to prawy margines zostanie dopasowany. W efekcie powinniśmy otrzymać blok, którego szerokość całego pudełka będzie się pokrywać z szerokością bloku obejmującego. W przypadku kierunku tekstu "rtl" (od prawej do lewej) to lewy margines zostanie dopasowany.

Jeżeli dokładnie jedna wartość jest przypisana jako auto, zostaje ona dopasowana tak, aby przedstawione równanie zostało spełnione, tzn. jego szerokość będzie dopełnieniem do brakującej szerokości bloku obejmującego, wynikającej z mniejszej wartości sumy pozostałych składników równania.

Przykład:

Po wpisaniu:

<div style="width: 600px">
	<div style="margin-left: auto; border-left: 5px solid red; padding-left: 10px; width: 400px; padding-right: 10px; border-right: 5px solid red; margin-right: 20px">...</div>
</div>

powinniśmy otrzymać na ekranie blok, którego lewy margines wynosi:
600 - 5 - 10 - 400 - 10 - 5 - 20 = 150 pikseli

UWAGA! W trybie Quirks interpretacja będzie zupełnie inna.

Jeżeli 'width' jest ustawione na auto, wszystkie inne wartości auto przyjmują ostateczną wartość zero, a szerokość zostaje dopasowana do pełnej szerokości bloku obejmującego.

Przykład:

<div style="width: 600px">
	<div style="margin-left: 20px; width: auto; margin-right: auto">...</div>
</div>

W tym przykładzie prawy margines uzyska wartość zero, natomiast ostateczna szerokość bloku wyniesie:
600 - 20 = 580 pikseli

Jeśli zarówno 'margin-left' jaki i 'margin-right' posiadają wartość auto, oznacza to, że ich ostateczna szerokość będzie taka sama. Pozwala to wyśrodkować w poziomie element względem krawędzi bloku obejmującego.

Przykład:

Następujący kod:

<div style="width: 600px">
	<div style="margin-left: auto; width: 400px; margin-right: auto">...</div>
</div>

Pozwala wycentrować wewnętrzny blok o szerokości 400px. Marginesy - lewy i prawy - uzyskają taką samą wartość ostateczną:
(600 - 400) / 2 = 100 pikseli

UWAGA! W trybie Quirks interpretacja będzie zupełnie inna.

Dla uzyskania analogicznego efektu również w trybie Quirks należy wpisać:

<div style="width: 600px; text-align: center">
	<div style="text-align: left; margin-left: auto; width: 400px; margin-right: auto">...</div>
</div>

Sposób ten jest przydatny do centrowania tabeli (względem elementu BODY stanowiącego blok obejmujący) zgodnie z zaleceniami CSS.

<html>
<head>...</head>
<body style="text-align: center">
	<table style="margin-left: auto; margin-right: auto; text-align: left">...</table>
</body>
</html>

4. Elementy blokowe, zastępowane

Przykład: IMG, INPUT, TEXTAREA, SELECT, OBJECT - z ustawionym stylem display: block.

Ostateczna wartość szerokości jest wyznaczana tak jak dla elementów "inline" zastępowanych (punkt 2). Następnie dla wyznaczenia marginesów zastosowane zostają reguły jak dla elementów "blokowych" nie-zastępowanych (punkt 3).

5. Elementy z oblewaniem (float) nie-zastępowane

Przykład: DIV, SPAN i inne (ale nie IMG, INPUT, TEXTAREA, SELECT, OBJECT, które są elementami zastępowanymi) - z ustawionym stylem float różnym od none.

Jeżeli margin-left lub margin-right jest ustawiony na auto, przyjmuje ostateczną szerokość zero. Ponadto w CSS 2.1 ustawienie auto dla width spowoduje określenie szerokości w sposób podobny jak to się dzieje dla komórek tabeli (CSS 2 określa w tym przypadku wartość zero):

min(max(preferowana najmniejsza szerokość, dostępna szerokość), preferowana szerokość)

Preferowana najmniejsza szerokość jest obliczana poprzez próbę przełamania wierszy w każdym możliwym miejscu, czyli po każdym wyrazie. Dostępna szerokość to poziomy rozmiar bloku obejmującego pomniejszony o marginesy, obramowanie, marginesy wewnętrzne i ewentualne paski przewijania elementu. Preferowana szerokość jest obliczana bez przełamywania wierszy, chyba że w kodzie znajduje się element <br />.

Z powyższego równania wynika w szczególności, że dwa bloki z oblewaniem, bez ustalonej szerokości lub z ustaloną wartością width: auto, mogą się ustawić obok siebie, o ile tekst i inne elementy w nich zawarte będą na tyle krótkie, że zmieszczą się w jednej linii bez potrzeby przełamywania wierszy.

Właściwość ta jest często wykorzystywana przy tworzeniu struktury strony w oparciu o CSS, np. do ustawienia obok siebie linków zgromadzonych w wykazie, aby utworzyć efekt zakładek nawigacyjnych itp.

Pamiętaj, że w przypadku ustawienia dwóch bloków obok siebie, nie zostanie dodana między nimi dodatkowa spacja w tekście. Aby oddalić od siebie takie bloki, można ustawić odpowiedni margines.

Przykład:

Poniższe bloki najprawdopodobniej ustawią się obok siebie, a nie jeden pod drugim (zależnie od rozmiaru czcionki i szerokości bloku obejmującego):

<div style="float: left">Blok 1</div>
<div style="float: left">Blok 2</div>
<div style="float: left">Blok 3</div>

Identyczny efekt:

<div style="float: left; width: auto">Blok 1</div>
<div style="float: left; width: auto">Blok 2</div>
<div style="float: left; width: auto">Blok 3</div>

Poniższe bloki ustawią jeden pod drugim:

<div style="float: left; width: 100%">Blok 1</div>
<div style="float: left; width: 100%">Blok 2</div>
<div style="float: left; width: 100%">Blok 3</div>

Poniższe bloki najprawdopodobniej ustawią się obok siebie, a nie jeden pod drugim:

<div style="float: left; width: 25%">Blok 1</div>
<div style="float: left; width: 50%">Blok 2</div>
<div style="float: left; width: 25%">Blok 3</div>

Oczywiście wartości szerokości bloków można podawać również w innych jednostkach długości, np. w pikselach.

Ostatni przykład, obok pozycjonowania, jest zwykle wykorzystywany do budowy szkieletu strony w oparciu o CSS, a nie tak jak robiło się kiedyś - w oparciu o odpowiednio sformatowane tabele.

Tworzenie szkieletu strony w oparciu o tabele zostało obmyślone w czasach, kiedy nie było jeszcze CSS lub był słabo wspierany przez przeglądarki. Wtedy był to jedyny sposób budowy bardziej wyszukanego układu treści. Obecnie interpretacja CSS w popularnych przeglądarkach jest już wystarczająca, aby ostatecznie porzucić stare nawyki projektowania struktury. Tabele służą do prezentacji danych tabelarycznych, a nie do tworzenia struktury strony.

Jeżeli w dowolnym bloku, przedstawionym w ostatnim przykładzie, znajdzie się element szerszy niż ustalony rozmiar poziomy, bloki mogą się ustawić jeden pod drugim, co zupełnie zepsuje cały układ strony.

Może się to zdarzyć, kiedy tekst nie będzie się mógł przełamać do następnej linijki z powodu wystąpienia niezwykle długiego wyrazu albo ustawienia blokady przełamania wierszy bądź kiedy wstawiony zostanie element z określoną dużą szerokością, jak np. obrazek. Aby do tego nie dopuścić, można dla wszystkich bloków ustawić dodatkowy styl overflow: hidden, co spowoduje przycięcie prawej części treści, która nie mieści się w wyznaczonej szerokości. Co prawda wtedy nie będzie można odczytać uciętej treści, ale układ strony nie zmieni się w sposób niekontrolowany.

6. Elementy z oblewaniem (float) zastępowane

Przykład: IMG, INPUT, TEXTAREA, SELECT, OBJECT - z ustawionym stylem float różnym od none.

Jeżeli margin-left lub margin-right jest ustawiony na auto, przyjmuje ostateczną szerokość zero. Ostateczna wartość dla width jest ustalana jak dla elementów "inline" zastępowanych (punkt 2).

7. Elementy pozycjonowane absolutnie, nie-zastępowane

Przykład: DIV, SPAN i inne (ale nie IMG, INPUT, TEXTAREA, SELECT, OBJECT, które są elementami zastępowanymi) - z ustawionym stylem position: absolute.

Elementy takie muszą spełniać następujące równanie:

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

Rozwiązanie tego równania uzyskuje się poprzez wykonanie podstawień w następującym porządku (CSS 2):

1. Jeżeli 'left' jest ustawione na auto, a kierunek tekstu (direction) jest "ltr" (od lewej do prawej), zastąp wartość auto odległością od lewej krawędzi bloku obejmującego do lewej krawędzi marginesu (zewnętrznego) hipotetycznego pudełka, które wystąpiłoby, gdyby element był pozycjonowany statycznie (położenie spoczynkowe). Ustalona w ten sposób wartość będzie ujemna, jeśli hipotetyczne pudełko wychodzi poza lewą krawędź bloku obejmującego.
2. Jeżeli 'right' jest ustawione na auto, a kierunek tekstu (direction) jest "rtl" (od prawej do lewej), zastąp wartość auto odległością od prawej krawędzi bloku obejmującego do prawej krawędzi marginesu (zewnętrznego) hipotetycznego pudełka (jak wyżej). Ustalona w ten sposób wartość będzie dodatnia, jeśli hipotetyczne pudełko wychodzi poza lewą krawędź bloku obejmującego.
3. Jeżeli 'width' jest ustawione na auto, zastąp pozostałe wartości auto dla 'left' lub 'right' wartością zero.
4. Jeżeli 'left', 'right' lub 'width' nadal posiada wartość auto, zastąp zerem wartości auto przypisane do 'margin-left' lub 'margin-right'.
5. Jeżeli w tym punkcie obie własności: 'margin-left' i 'margin-right' mają nadal wartość auto, rozwiąż powyższe równanie dodając nowy warunek taki, że oba marginesy muszą uzyskać jednakową szerokość.
6. Jeżeli w tym punkcie pozostała tylko jedna wartość auto, rozwiąż powyższe równanie dla tej wartości.
7. Jeżeli w tym punkcie nadal nie można rozwiązać równania, zignoruj 'left' (jeśli kierunek tekstu jest "rtl") lub 'right' (jeśli kierunek tekstu jest "ltr") i rozwiąż równanie dla tej wartości.

8. Elementy pozycjonowane absolutnie, zastępowane

Przykład: IMG, INPUT, TEXTAREA, SELECT, OBJECT - z ustawionym stylem position: absolute.

Sytuacja jest podobna jak w poprzednim punkcie za wyjątkiem tego, że element posiada wewnętrzną szerokość. Sekwencja podstawiania do równania jest teraz następująca:

1. Jeżeli 'width' jest ustawione na auto, podstaw wewnętrzną szerokość elementu.
2. Jeżeli 'left' jest ustawione na auto, a kierunek tekstu (direction) jest "rtl" (od prawej do lewej), zastąp wartość auto odległością od prawej krawędzi bloku obejmującego do prawej krawędzi marginesu (zewnętrznego) hipotetycznego pudełka (jak wyżej). Ustalona w ten sposób wartość będzie dodatnia, jeśli hipotetyczne pudełko wychodzi poza lewą krawędź bloku obejmującego.
3. Jeżeli 'right' jest ustawione na auto, zastąp pozostałe wartości auto dla 'left' lub 'right' wartością zero.
4. Jeżeli 'left' lub 'right' są auto zastąp zerem wartości auto przypisane do 'margin-left' lub 'margin-right'.
5. Jeżeli w tym punkcie obie własności: 'margin-left' i 'margin-right' mają nadal wartość auto, rozwiąż powyższe równanie dodając nowy warunek taki, że oba marginesy muszą uzyskać jednakową szerokość.
6. Jeżeli w tym punkcie pozostała tylko jedna wartość auto, rozwiąż powyższe równanie dla tej wartości.
7. Jeżeli w tym punkcie nadal nie można rozwiązać równania, zignoruj 'left' (jeśli kierunek tekstu jest "rtl") lub 'right' (jeśli kierunek tekstu jest "ltr") i rozwiąż równanie dla tej wartości.

9. Elementy inline-block, nie-zastępowane

Przykład: Elementy z ustawionym stylem display: inline-block, ale nie IMG, INPUT, TEXTAREA, SELECT, OBJECT, które są elementami zastępowanymi.

Jeżeli width jest ustawione jako auto, spowoduje to określenie szerokości w sposób podobny jak to się dzieje dla komórek tabeli.

Dla margin-left lub margin-right ustawionych na auto zostają przyjęte ostateczne wartości równe zero.

10. Elementy inline-block, zastępowane

Przykład: IMG, INPUT, TEXTAREA, SELECT, OBJECT - z ustawionym stylem display: inline-block.

Tak samo jak dla elementów "inline" zastępowanych (punkt 2).

Wysokość i marginesy automatyczne

Podrozdział ten opisuje analogiczne zagadnienie, jak Szerokość i marginesy automatyczne, tzn. specjalne zasady dopasowywania wysokości (height) oraz pionowych marginesów elementów (margin-top, margin-bottom), po przypisaniu im wartości auto.

Przedstawione poniżej punkty 1-3 obejmują również elementy pozycjonowane relatywnie.

1. Elementy inline, nie-zastępowane

Jeżeli własności top, bottom, margin-top lub margin-bottom mają przypisaną wartość auto, przyjmują ostateczną wartość zero. Własność height nie ma zastosowania (nie można jej przypisać), ale zależy od wysokości linii (line-height).

2. Elementy zastępowane: inline, blokowe, inline-block oraz z oblewaniem (float).

Jeżeli własności top, bottom, margin-top lub margin-bottom mają przypisaną wartość auto, przyjmują ostateczną wartość zero. Przypisanie wartości auto dla wysokości, spowoduje przyjęcie wysokości wewnętrznej. Ponadto CSS 2.1 określa przypadek, kiedy element posiada wewnątrzne proporcje (np. obrazek), a przy tym wartość height wynosi auto. W takim przypadku ostateczna wysokość elementu jest obliczana ze wzoru:

(ustawiona szerokość) / (wewnętrzne proporcje)

co oznacza po prostu przeskalowanie elementu tak, aby zachował on swoje proporcje.

3. Elementy nie-zastępowane: blokowe oraz z oblewaniem (float).

Jeżeli własności top, bottom, margin-top lub margin-bottom mają przypisaną wartość auto, przyjmują ostateczną wartość zero. Przypisanie wartości auto dla wysokości, spowoduje uzależnienie jej od wysokości elementów dzieci, przy czym pod uwagę nie są brane dzieci z ustawionym oblewaniem (float) ani pozycjonowane absolutnie, natomiast w przypadku dzieci pozycjonowanych relatywnie ich przesunięcie jest pomijane.

4. Elementy pozycjonowane absolutnie, nie-zastępowane

Wysokość i marginesy takich elementów wyznacza się analogicznie, jak w punkcie 7 podrozdziału: Szerokość i marginesy automatyczne, tzn. muszą spełniać następujące równanie:

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

5. Elementy pozycjonowane absolutnie, zastępowane

Sytuacja jest podobna jak w poprzednim punkcie za wyjątkiem tego, że element posiada wewnętrzną wysokość (zobacz punkt 8 podrozdziału: Szerokość i marginesy automatyczne).

Maksymalna szerokość

selektor { max-width: wartość }

Polecenie nie odnosi się do elementów inline!

Polecenie pozwala zabezpieczyć rozmiar elementu tak, aby nigdy nie był większy od podanej wartości. Różnica w stosunku do prostej własności width jest taka, że jeśli element osiągnie szerokość mniejszą lub równą niż podana, to jego rozmiary nie zostaną zmienione. Dla elementów zastępowanych (np. obrazków) własność ta może mieć wpływ również na wysokość elementu, ponieważ będzie on przeskalowany tak, aby zachował swoje proporcje.

UWAGA! Polecenie nie interpretuje MSIE 6, a MSIE 7.0 obsługuje, ale nie w trybie Quirks.

Przykład:

Ten obrazek powinien mieć szerokość maksymalną 50px (max-width: 50px):

Minimalna szerokość

selektor { min-width: wartość }

Polecenie nie odnosi się do elementów inline!

Polecenie pozwala zabezpieczyć rozmiar elementu tak, aby nigdy nie był mniejszy od podanej wartości. Różnica w stosunku do prostej własności width jest taka, że jeśli element osiągnie szerokość większą lub równą niż podana, to jego rozmiary nie zostaną zmienione. Dla elementów zastępowanych (np. obrazków) własność ta może mieć wpływ również na wysokość elementu, ponieważ będzie on przeskalowany tak, aby zachował swoje proporcje.

UWAGA! Polecenie nie interpretuje MSIE 6, a MSIE 7.0 obsługuje, ale nie w trybie Quirks.

Przykład:

Ten obrazek powinien mieć szerokość minimalną 200px (min-width: 200px):

Maksymalna wysokość

selektor { max-height: wartość }

Polecenie nie odnosi się do elementów inline!

UWAGA! Polecenie nie interpretuje MSIE 6, a MSIE 7.0 obsługuje, ale nie w trybie Quirks.

Przykład:

Ten obrazek powinien mieć wysokość maksymalną 20px (max-height: 20px):

Minimalna wysokość

selektor { min-height: wartość }

Polecenie nie odnosi się do elementów inline!

UWAGA! MSIE 6 obsługuje to polecenie tylko w trybie Quirks i jedynie dla elementnów TD, TH i TR w tabeli z ustawionym stałym rozplanowaniem ("fixed"). Natomiast MSIE 7.0 w pełni obsługuje, ale nie w trybie Quirks.

Przykład:

Ten obrazek powinien mieć wysokość minimalną 150px (min-height: 150px):

Przepełnienie

selektor { overflow: sposób }

Według CSS 2.1 polecenie można również zastosować do komórek tabeli.

Określa co zrobić, gdy zawartość elementu nie mieści się w rozmiarach podanych przez width oraz height. Możliwe jest ukrycie nadmiarowej zawartość, pokazanie wszystkiego poprzez powiększenie rozmarów elementu (bez względu na parametry width i height) albo utworzenie suwaków do przewijania przepełnionej treści.

W przeglądarce Mozilla Firefox podczas drukowania strony, w której treść została objęta blokiem z przypisanym stylem "overflow: hidden", może wystąpić błąd, polegający na wydrukowaniu tylko pierwszej strony, nawet jeśli wysokość takiego bloku nie została określona.

Rozwiązaniem problemu jest przypisanie w arkuszu stylów dla wydruku deklaracji "overflow: visible" wszystkim elementom, które w domyślnym arkuszu stylów posiadają inną wartość tej właściwości, np.:

#tresc { overflow: hidden }

@media print {
	#tresc { overflow: visible }
}

Przykład:

width: 5ex
Szerokość tego akapitu jest większa niż 5ex, ponieważ w takich rozmiarach nie mieści się jego zawartość.

overflow: visible; width: 5ex overflow: visible; width: 5ex; overflow: visible; width: 5ex

overflow: hidden; width: 10em; height: 4em; overflow: hidden; width: 10em; height: 4em; overflow: hidden; width: 10em; height: 4em

overflow: scroll; width: 10em; height: 4em; overflow: scroll; width: 10em; height: 4em; overflow: scroll; width: 10em; height: 4em

overflow: auto; width: 10em; height: 4em; overflow: auto; width: 10em; height: 4em; overflow: auto; width: 10em; height: 4em

overflow: auto; width: 20em; overflow: auto; width: 20em; overflow: auto; width: 20em

Przeciąganie

(CSS 3 - interpretuje Firefox 4, Opera, Chrome/Safari 3)

selektor { resize: sposób }

Zdarza się, że treść elementu nie mieści się w ustalonych dla niego wymiarach. Może to spowodować zaburzenie estetyki strony - np. kolumna menu może w takiej sytuacji opaść na dół (pod treść). Można się przed tym zabezpieczyć blokując przepełnienie elementu ("overflow: hidden"). Co jednak, jeśli czytelnik mimo wszystko będzie chciał zobaczyć przyciętą treść? Można mu to umożliwić, poprzez udostępnienie specjalnego uchwytu do przeciągania narożnika elementu (zwykle prawego-dolnego), aby mógł go swobodnie powiększyć i odczytać ukrytą treść.

Taki przeciągany narożnik jest domyślnie dostępny w przeglądarce Safari i Chrome dla wszystkich obszarów tekstowych formularzy. W pewnych sytuacjach twórca strony może jednak nie chcieć, aby użytkownik rozciągał w ten sposób pola formularza, gdyż może to wywołać niekontrolowane zmiany wyglądu całego formularza. W takiej sytuacji przydatny może być styl:

textarea { resize: none }

Nie zaleca się jednak blokowania w każdej sytuacji możliwości zmiany rozmiaru obszaru tekstowego, ponieważ może to skutecznie uprzykrzyć życie użytkownikom. O ile czasami zmiana szerokości pola może zaburzyć układ strony, to wpływanie przez użytkownika na wysokość raczej nie powinno spowodować żadnych błędów. Zatem najczęściej lepszym rozwiązaniem będzie:

textarea { resize: vertical }

Przyklad:

"resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"

resize: both

resize: vertical

resize: horizontal

resize: none

zwykły obszar tekstowy

• Wykazy
• Tabele

• Do góry
• Strona główna