14. Określanie rozmiarów w CSS

W CSS jest dostępnych kilka mechanizmów decydujących o ostatecznym rozmiarze elementów HTML znajdujących się na stronie. Niektóre z nich można w pełni kontrolować bezpośrednio.

Na przykład do określania konkretnej szerokości i wysokości służą własności width i height, które są skuteczne, ale należy z nimi uważać, ponieważ mogą spowodować, że treść elementu wyjdzie poza jego granice. Aby kontrolować, co dzieje się w takiej sytuacji, można skorzystać z własności z rodziny overflow, które pozwalają zdecydować, czy nadmiarowa treść ma być widoczna, czy nie.

Inne mechanizmy decydują o rozmiarze elementu w sposób pośredni, tzn. na to, jaki ostatecznie rozmiar będzie miał element, mają wpływ różne czynniki, między innymi otoczenie, w jakim się on znajduje, to, czy ma on tzw. wymiary naturalne, czy nie, oraz ustawienia różnych własności, takich jak na przykład border lub box-sizing.

Spójrz na poniższy przykład:

<style>
div {
  width: 300px;
  height: 200px;
  border: 10px solid red;
  margin: 20px;
}
p {
  border: 5px solid green;  
}
</style>
<div>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Osobie słabo znającej mechanizmy wyznaczania rozmiaru elementów HTML na stronie może się wydawać oczywiste, że element div będzie miał szerokość 300 pikseli, a element p będzie miał szerokość równą długości zawartego w nim tekstu.

Jednak w obu przypadkach ta osoba byłaby w błędzie. Zgodnie z zasadami standardowego modelu polowego CSS, któremu w tym przypadku domyślnie podlegają oba omawiane elementy, pole elementu div będzie miało szerokość 320 pikseli, ponieważ do ustawienia własności width zostanie dodane po 10 pikseli szerokości obramowania z lewej i prawej strony.

Dodatkowo zdefiniowaliśmy margines, który nie wchodzi w skład pola elementu, ale również przyczynia się do ilości zajmowanego przez nie miejsca na stronie. W efekcie ostatecznie ten element div będzie zajmował 360 pikseli w poziomie.

Natomiast element p, który znajduje się wewnątrz elementu div, będzie miał szerokość 300 pikseli. Jest to element blokowy, czyli taki, który domyślnie zajmuje całą dostępną mu przestrzeń w poziomie, a w tym przypadku wewnątrz elementu div dostępne było 300 pikseli szerokości — własność width w standardowym modelu polowym określa właśnie szerokość obszaru treści.

Gdybyśmy zamiast elementu p użyli na przykład elementu span, który jest element elementem śródliniowym, to rzeczywiście jego szerokość byłaby równa długości znajdującego się w nim tekstu (ale nie większa niż 300 pikseli), ponieważ elementy tego typu domyślnie dopasowują się szerokością do swojej treści.

Na podstawie tego prostego przykładu możemy zdefiniować dwa podstawowe pojęcia dotyczące określania rozmiaru elementów HTML w CSS:

Rozmiar wewnętrzny (ang. inner size)

Szerokość i wysokość obszaru treści pola elementu, czyli obszaru znajdującego się wewnątrz obszaru obszaru dopełnienia, bezpośrednio w którym znajduje się treść właściwa elementu.

Rozmiar zewnętrzny (ang. outer size)

Szerokość i wysokość całego obszaru zajmowanego przez element na stronie, obejmującego także margines. Inaczej mówiąc, są to wymiary wyznaczane przez zewnętrzną krawędź marginesu elementu. Dokładnie tyle miejsca element zajmuje na stronie wśród innych elementów.

Oba te pojęcia są przedstawione na poniższej ilustracji:

Z wyznaczaniem rozmiaru elementów HTML na stronie w CSS nieodłącznie wiąże się także pojęcie modelu polowego CSS.

Są dwa modele polowe – standardowy model polowy i alternatywny model polowy – które można wybierać za pomocą własności box-sizing.

W standardowym modelu polowym (własność box-sizing ustawiona na content-box) rozmiar pola elementu w każdym wymiarze (poziomym i pionowym) jest sumą szerokości jego obszarów obramowania, dopełnienia i treści w danym wymiarze, a własności width i height określają tylko szerokość i wysokość obszaru treści, która cały czas pozostaje niezmienna.

Natomiast w alternatywnym modelu polowym (własność box-sizing ustawiona na border-box) własności width i height określają rozmiar całego pola elementu w każdym wymiarze (poziomym i pionowym). Ewentualne dopełnienie i obramowanie powodują zmniejszenie ilości miejsca dostępnej dla obszaru treści. W efekcie rozmiar obszaru ten jest zmienny i zależny także od innych czynników niż ustawienia własności width i height.

Nie będziemy się tu dalej zagłębiać w szczegóły Modelu polowego CSS, ponieważ jego dokładny opis znajduje się na stronie Model polowy CSS.

Niezależnie od powyższych zasad, elementy HTML można podzielić na takie, które mają wymiary naturalne, np. img, i takie które ich nie mają, np. p.

Wymiary naturalne oraz pochodzenia wewnętrznego i zewnętrznego

Wszystkie elementy HTML mają tzw. rozmiar pochodzenia wewnętrznego (ang. intrinsic size), który mówiąc najprościej odpowiada rozmiarowi ich treści właściwej – najbardziej wewnętrzny prostokąt na powyższej ilustracji.

Natomiast nie wszystkie elementy mają wymiary naturalne (ang. natural dimensions) którymi obdarzone są tylko niektóre z tzw. elementów zastępowanych, czyli takich, które reprezentują zasoby wstawiane do dokumentu ze źródła zewnętrznego, np. obrazy albo filmy wideo.

Wymiary te są sprawdzane przez przeglądarkę przed zastosowaniem arkuszy stylów, dzięki czemu nawet jeśli nie zdefiniujemy żadnych ustawień w CSS, zasoby te zostaną wyrenderowane w swoim naturalnym rozmiarze.

W przypadku takich elementów ich wymiary pochodzenia wewnętrznego często są ustawiane właśnie na podstawie ich wymiarów naturalnych.

Pod tym względem elementy te różnią się od elementów nieposiadających wymiarów naturalnych, takich jak p, div, span, aside, section, article itd.

Kiedy umieścimy na stronie element pozbawiony wymiarów naturalnych, nie dodamy do niego żadnej treści i nie zdefiniujemy mu żadnej z własności wpływających na rozmiar jego pola (np. width, height, border lub padding), to nie będzie on miał żadnych wymiarów i będzie niewidoczny.

Wymiary pochodzenia wewnętrznego, zarówno elementów zastępowanych, takich jak img, jak i pozostałych, takich jak p, są ustalane na podstawie ich zawartości.

Jednak rozmiar elementu można ustalić także w odniesieniu do czynników zewnętrznych i wtedy nazywa się go rozmiarem pochodzenia zewnętrznego (ang. extrinsic size). Przykładem ustalania rozmiaru elementu na podstawie czynnika zewnętrznego jest nadanie mu wysokości w procentach. Spójrz na poniższy przykład:

<style>
div {
  width: 300px;
  height: 300px;
  padding: 5px;
  border: 3px solid red;
}
p {
  width: 80%;
  height: 40%;
  border: 3px solid green;
}
</style>
<div>
  <p></p>
</div>

Wartości procentowe własności width i height danego elementu odnoszą się do rozmiaru obszaru treści jego bloku zawierającego. W efekcie pochodzenie ich wartości ma charakter zewnętrzny – nie zależy od treści wewnętrznej elementu, tylko od rozmiaru elementu znajdującego się na zewnątrz.

W powyższym przykładzie, w którym domyślnie jest stosowany standardowy model polowy, element p miałby 240 pikseli szerokości i 120 pikseli wysokości, ponieważ obszar treści bloku zawierającego, w którym się on znajduje, ma wymiary 300 × 300 pikseli.

Gdybyśmy zmienili model polowy na alternatywny, rozmiar obszaru treści elementu div byłby inny, w efekcie czego zmieniłyby się także wymiary zależnego od niego elementu p.

Znając podstawowe czynniki wpływające na wymiary elementów, możemy przejść do praktycznych zagadnień związanych z określaniem rozmiarów. Pamiętaj, że pojęcie rozmiaru dotyczy nie tylko szerokości i wysokości elementów, ale także grubości marginesów, dopełnienia, obramowania czy obrysu. Szczegółowe informacje na te tematy znajdziesz na stronach poświęconych poszczególnym zagadnieniom.

Określanie dokładnych rozmiarów

Do dokładnego określania rozmiarów elementów w CSS służą własności width i height. Pierwsza ustawia szerokość, a druga wysokość obszaru treści (w przypadku standardowego modelu polowego) lub obszaru obramowania (w przypadku alternatywnego modelu polowego).

Każda z nich przyjmuje różne typy wartości, takie jak liczby z jednostką długości, wartości procentowe albo słowa kluczowe auto, fit-content, max-content i min-content.

Z własności tych, zwłaszcza height, należy korzystać bardzo ostrożnie, ponieważ łatwo można spowodować przepełnienie elementu skutkujące wyjściem treści poza jego granice, co zawsze wygląda nieatrakcyjnie.

W szczególności rzadko określa się wysokość elementów, aby w razie potrzeby treść mogła zawijać się do kolejnych wierszy i rozciągać element w pionie do żądanego rozmiaru.

Oczywiście własność height ma pewne zastosowania, na przykład za jej pomocą można ustawić wysokość części nagłówka zawierającej logo, którego rozmiar się nie zmienia i w innych tego typu przypadkach. Są to jednak sytuacje dość rzadkie i raczej wyjątkowe.

Jeśli chodzi o własność width, to często nadaje się jej wartości procentowe. Powiedzmy na przykład, że chcemy utworzyć kolumnę zajmującą jedną trzecią szerokości ekranu. W takiej sytuacji dobrym pomysłem może być zastosowanie deklaracji width: 33%.

Osobną sprawą jest kwestia wymiarów obrazów.

Wymiary obrazów

Wymiary większości elementów na stronie określa się za pomocą własności CSS, takich jak width, height, min-width, min-height itd. Jednak w przypadku obrazów zalecane jest inne podejście, które wiąże się z tym, że mają one wymiary naturalne.

Elementom obrazów (img) zawsze należy nadawać atrybuty width i height określające ich wymiary. Dzięki temu przeglądarka podczas wczytywania strony od razu wie, ile miejsca musi zarezerwować dla nich na stronie, np.:

<img src="obraz.webp" width="200" height="200" alt="Interesująca ilustracja">

Jeśli nie zdefiniujemy tych atrybutów, to przeglądarka najpierw wczyta kod HTML strony, wyświetli wstępnie jej zawartość, po czym wczyta obrazy, sprawdzi ich wymiary i dostosuje układ elementów na stronie, aby zrobić miejsce dla tych obrazów.

Jeśli zdefiniujemy atrybuty width i height elementom img, to przeglądarka od razu zarezerwuje dla nich odpowiednią ilość miejsca i nie będzie już musiała dostosowywać układu elementów później. Bardziej szczegółowy opis tej kwestii znajduje się w Kursie HTML i CSS w podrozdziale Wymiary obrazu – atrybuty width i height.

Określanie przedziałów szerokości i wysokości

Jeśli nie chcemy ustawiać szerokości lub wysokości elementu na sztywno, tylko chcielibyśmy określić pewien dopuszczalny przedział rozmiarów, to możemy użyć poniższych własności:

• min-width – szerokość minimalna
• min-height – wysokość minimalna
• max-width – szerokość maksymalna
• max-height – wysokość maksymalna

Za ich pomocą można sprawić, że wybrane elementy nigdy nie będą mniejsze lub większe od określonego rozmiaru. Jeśli na przykład nie chcemy, aby wybrany element zwiększał wysokość w nieskończoność, możemy zdefiniować mu własność max-height, która sprawi, że będzie powiększał się tylko do określonego pułapu.

Czasami jednak dochodzi do tego, że treść elementu nie mieści się w jego granicach. Możemy dopuścić do tego celowo albo może się to zdarzyć przypadkowo, wbrew naszym intencjom. W takich sytuacjach można posłużyć się własnościami z rodziny overflow, które określają zachowanie elementu w sytuacji, gdy zawiera więcej treści niż może pomieścić.

Przepełnienie treścią

Kiedy element zawiera więcej treści niż może pomieścić, dochodzi do jego przepełnienia (ang. overflow). Domyślnie w takim przypadku nadmiarowa treść po prostu wychodzi poza granice elementu i nadal jest w całości widoczna, co zazwyczaj nie wygląda zbyt estetycznie, jak widać na poniższym zrzucie ekranu.

Aby temu zapobiec, można użyć własności overflow. Jeśli nadamy jej wartość clip, to treść zostanie po prostu obcięta na granicy elementu, a jeśli nadamy jej wartość auto, to element wyświetli odpowiednie paski przewijania, dzięki którym użytkownik będzie mógł obejrzeć całą treść. Spójrz na poniższe zrzuty ekranu.

Dodatkowo można kontrolować miejsce odcięcia treści za pomocą własności overflow-clip-margin, choć na razie jeszcze nie jest ona idealnie obsługiwana przez przeglądarki.

A jeśli chcemy dać użytkownikom możliwość zmiany rozmiaru elementów, możemy użyć własności resize, której opis znajduje się na stronie Własność CSS resize.

Poniższa tabela zawiera zestawienie własności z rodziny overflow, które służą do kontroli zachowania elementów zawierających więcej treści niż są w stanie pomieścić. Kliknij nazwę wybranej własności, aby przejść do jej szczegółowego opisu.