W tym rozdziale dowiesz się...

Jak określić dokładne rozmiary elementów na stronie WWW?

• 
  Blok obejmujący CSS

  Jak wyznaczyć element, względem którego obliczana jest pozycja i rozmiary elementów?

• 
  Szerokość {width}

  W jaki sposób najprościej ustawić szerokość elementu?

• 
  Wysokość {height}

  W jaki sposób najprościej ustawić wysokość elementu?

• 
  Szerokość i marginesy automatyczne

  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?

• 
  Wysokość i marginesy automatyczne

  Co zrobić, aby wysokość i pionowe marginesy dopasowywały się do sąsiednich elementów, tak aby wyświetlanie zawsze było poprawne?

• 
  Maksymalna szerokość {max-width}

  Co zrobić, aby szerokość elementu nigdy nie przekroczyła ustalonej wartości?

• 
  Minimalna szerokość {min-width}

  Co zrobić, aby szerokość elementu nigdy nie była mniejsza od ustalonej wartości?

• 
  Maksymalna wysokość {max-height}

  Co zrobić, aby wysokość elementu nigdy nie przekroczyła ustalonej wartości?

• 
  Minimalna wysokość {min-height}

  Co zrobić, aby wysokość elementu nigdy nie była mniejsza od ustalonej wartości?

• 
  Przepełnienie {overflow}

  W jaki sposób dodać suwaki przewijania do dowolnego elementu? Co zrobić, aby zawartość elementu nigdy nie wychodziła poza jego obręb?

• 
  Przepełnienie tekstu {text-overflow}

  Co zrobić, kiedy tekst nie mieści się w ustalonej szerokości elementu na stronie?

• 
  Przeciąganie {resize}

  W jaki sposób zablokować możliwość zmiany rozmiaru (przeciągania) obszaru tekstowego w formularzu?

• 
  Pytania i odpowiedzi

  CSS

• 
  Powtórka

  CSS

Blok obejmujący CSS

Jak wyznaczyć element, względem którego obliczana jest pozycja i rozmiary elementów?

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ść {width}

W jaki sposób najprościej ustawić szerokość elementu?

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 {width}

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):

Pytania i odpowiedzi {width}

Co oznacza "width" w CSS?

W CSS, właściwość width określa szerokość elementu HTML. Może być wyrażona jako wartość procentowa, pikselowa lub w innych jednostkach. Działa na elementach blokowych i inline-block, umożliwiając kontrolę nad szerokością kontenera lub elementu.

Jak ustawić szerokość w CSS?

Aby ustawić szerokość w CSS, użyj właściwości width i przypisz jej wartość, na przykład: <div style="width: 300px">Ten DIV ma szerokość 300 pikseli.</div>. Możesz również stosować jednostki innych niż piksele, takie jak procenty lub em.

Wysokość {height}

W jaki sposób najprościej ustawić wysokość elementu?

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 {height}

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):

Pytania i odpowiedzi {height}

Jak ustawić wysokość w CSS?

W CSS, wysokość elementu można ustawić za pomocą właściwości height, gdzie przypisujemy jej wartość, np. "height: 100px". Można również używać innych jednostek, takich jak procenty lub em.

Jak rozciągnąć DIV na całą wysokość?

Aby rozciągnąć <div> na całą dostępną wysokość, można użyć właściwości CSS "height: 100%" na <html> i <body>, a także upewnić się, że żadne z tych elementów nie ma ustawionej marginesów ani paddingu, które mogą wpłynąć na wysokość. Na przykład: <html style="height: 100%"> <body style="height: 100%; margin: 0"> <div style="height: 100%">Ten DIV zajmie całą dostępną wysokość.</div> </body> </html>.

Szerokość i marginesy automatyczne

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?

Wstęp

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 np. 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

Co zrobić, aby wysokość i pionowe marginesy dopasowywały się do sąsiednich elementów, tak aby wyświetlanie zawsze było poprawne?

Wstęp

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ść {max-width}

Co zrobić, aby szerokość elementu nigdy nie przekroczyła ustalonej wartości?

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.

Przykład {max-width}

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

Minimalna szerokość {min-width}

Co zrobić, aby szerokość elementu nigdy nie była mniejsza od ustalonej wartości?

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.

Przykład {min-width}

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

Maksymalna wysokość {max-height}

Co zrobić, aby wysokość elementu nigdy nie przekroczyła ustalonej wartości?

selektor { max-height: wartość }

Polecenie nie odnosi się do elementów inline!

Przykład {max-height}

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

Minimalna wysokość {min-height}

Co zrobić, aby wysokość elementu nigdy nie była mniejsza od ustalonej wartości?

selektor { min-height: wartość }

Polecenie nie odnosi się do elementów inline!

Przykład {min-height}

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

Przepełnienie {overflow}

W jaki sposób dodać suwaki przewijania do dowolnego elementu? Co zrobić, aby zawartość elementu nigdy nie wychodziła poza jego obręb?

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.

Przykład {overflow}

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

Pytania i odpowiedzi {overflow}

Co to jest "overflow" w CSS?

W CSS, overflow to właściwość, która kontroluje, co dzieje się, gdy zawartość elementu jest większa od jego zadeklarowanej szerokości i wysokości. Określa, czy i jak ma być wyświetlany nadmiar treści wewnątrz elementu.

Co oznacza "overflow: hidden"?

W CSS, "overflow: hidden" to zastosowanie właściwości overflow z ustawieniem hidden. Oznacza to, że wszelki nadmiar zawartości, który wychodzi poza granice elementu, będzie ukryty i nie będzie widoczny dla użytkownika. Nie wyświetli się pasek przewijania ani część treści poza określoną przestrzenią elementu.

Przepełnienie tekstu {text-overflow}

Co zrobić, kiedy tekst nie mieści się w ustalonej szerokości elementu na stronie?

(CSS 3 - interpretuje Internet Explorer ^* , Firefox, Opera, Chrome)

selektor { text-overflow: sposób }

Normalnie w języku CSS nawet jeśli ustalimy szerokość elementu, ale następnie umieścimy w nim szerszy tekst - np. blokując jego zawijanie przy pomocy stylu "white-space: nowrap" albo znajdzie się w nim jakiś wyjątkowo długi wyraz - to taki tekst i tak wyjdzie poza obręb elementu. Oczywiście nie będzie to wyglądało zbyt estetycznie, a czasem może nawet zupełnie popsuć układ całej strony. Ponieważ często nie wiadomo z góry, jak długi może być tekst na stronie - bo powstanie on dopiero później - dlatego aby zabezpieczyć się na taką okoliczność, zwykle ukrywa się nadmiarową zawartość przy pomocy stylu "overflow: hidden" albo "overflow: auto". Kłopot w tym, że wtedy użytkownik może się w ogóle nie zorientować, że tekst został przycięty - zwłaszcza jeśli litery ułożą się w taki sposób, że żaden wyraz nie zostanie ucięty w środku. W takiej sytuacji znacznie lepiej by było wstawić na końcu wiersza wielokropek, który pozwoli czytelnikowi uniknąć nieporozumień. Oczywiście wielokropka nie możemy tam wstawić ręcznie, ponieważ nigdy nie wiadomo, jak się ułoży tekst na stronie (różne rozdzielczości ekranu, kroje i ustawienia wyświetlania czcionek).

Właśnie na taką okoliczność została stworzona deklaracja "text-overflow: ellipsis". Jeśli ją zastosujemy np. do akapitu, przeglądarka sama wstawi wielokropek, kiedy będzie to konieczne. Warto przy tym wiedzieć o bardzo wygodnym zachowaniu przeglądarek. Jeśli zaznaczymy myszką tak skrócony tekst, a następnie skopiujemy go do schowka systemowego, to znajdzie się tam pełna postać tekstu - ze wszystkimi wyrazami, ale bez wstawionych automatycznie wielokropków. Trzeba jednak również pamiętać o kilku ograniczeniach. Wielokropek nie zostanie automatycznie wstawiony w następujących przypadkach:

• kiedy wewnątrz elementu znajdują się inne elementy blokowe
• jeśli ustalimy wysokość elementu, a tekstu nawet po zawinięciu będzie za dużo, aby się tam zmieścił

* Niektóre starsze przeglądarki mogą obsługiwać "text-overflow: ellipsis" tylko w połączeniu z "white-space: nowrap".

Przykład {text-overflow}

p {
	width: 3em;
}

Za długie wyrazy w tym akapicie powinny wychodzić poza jego obręb.

p {
	width: 3em;
	overflow: hidden;
}

Za długie wyrazy w tym akapicie powinny zostać przycięte.

p {
	width: 3em;
	overflow: hidden;
	text-overflow: ellipsis;
}

Na końcu za długich wyrazów w tym akapicie powinny zostać wstawione wielokropki.

p {
	width: 15em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

Na końcu tekstu w tym akapicie powinien zostać wstawiony wielokropek.

Przeciąganie {resize}

W jaki sposób zablokować możliwość zmiany rozmiaru (przeciągania) obszaru tekstowego w formularzu?

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

Przykład {resize}

"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

Pytania i odpowiedzi

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

Powtórka

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

W jaki sposób najprościej ustawić szerokość elementu?

selektor { width: szerokość }

Zobacz więcej...

W jaki sposób najprościej ustawić wysokość elementu?

selektor { height: wysokość }

Zobacz więcej...

Co zrobić, aby szerokość elementu nigdy nie przekroczyła ustalonej wartości?

selektor { max-width: wartość }

Zobacz więcej...

Co zrobić, aby szerokość elementu nigdy nie była mniejsza od ustalonej wartości?

selektor { min-width: wartość }

Zobacz więcej...

Co zrobić, aby wysokość elementu nigdy nie przekroczyła ustalonej wartości?

selektor { max-height: wartość }

Zobacz więcej...

Co zrobić, aby wysokość elementu nigdy nie była mniejsza od ustalonej wartości?

selektor { min-height: wartość }

Zobacz więcej...

W jaki sposób dodać suwaki przewijania do dowolnego elementu? Co zrobić, aby zawartość elementu nigdy nie wychodziła poza jego obręb?

selektor { overflow: sposób }

Zobacz więcej...

Co zrobić, kiedy tekst nie mieści się w ustalonej szerokości elementu na stronie?

selektor { text-overflow: sposób }

Zobacz więcej...

W jaki sposób zablokować możliwość zmiany rozmiaru (przeciągania) obszaru tekstowego w formularzu?

selektor { resize: sposób }

Zobacz więcej...