Kurs HTML

Wprowadzenie: Kontrola wymiarów elementu

Właściwości width (szerokość) i height (wysokość) w CSS pozwalają jawnie ustawić wymiary **obszaru treści (content area)** elementu. Jak pamiętamy z poprzedniej lekcji, domyślnie (przy box-sizing: content-box;) te właściwości nie obejmują paddingu, obramowania ani marginesów.

Kontrola wymiarów jest fundamentalna przy tworzeniu layoutów, określaniu rozmiarów obrazków, kontenerów i innych bloków na stronie.

Wartości dla width i height

Właściwości width i height mogą przyjmować różne wartości:

• auto: Jest to wartość domyślna dla większości elementów blokowych. Przeglądarka oblicza szerokość lub wysokość automatycznie na podstawie zawartości elementu, dostępnej przestrzeni lub innych właściwości CSS.
  • Dla width, element blokowy domyślnie zajmuje 100% dostępnej szerokości kontenera nadrzędnego.
  • Dla height, wysokość dopasowuje się do zawartości elementu.
• <długość>: Ustawia stałą szerokość lub wysokość za pomocą jednostek długości (np. px, em, rem, vw, vh).

  .box {
    width: 300px;
    height: 150px;
  }
  
  .sidebar {
    width: 25rem;
  }
  
  .full-screen-section {
    width: 100vw; /* 100% szerokości viewportu */
    height: 100vh; /* 100% wysokości viewportu */
  }

• <procent>: Ustawia szerokość lub wysokość jako procent wymiarów **kontenera nadrzędnego (containing block)**.
  • width: 50%; oznacza, że element zajmie połowę szerokości swojego rodzica.
  • height: 100%; oznacza, że element spróbuje zająć całą wysokość rodzica. Uwaga: Aby procentowa wysokość działała, rodzic musi mieć jawnie zdefiniowaną wysokość (lub wysokość wynikającą z innych mechanizmów, np. Flexbox/Grid).

  .parent {
    width: 600px;
    height: 400px; /* Rodzic musi mieć określoną wysokość dla height: 100% dziecka */
    border: 1px solid gray;
  }
  
  .child {
    width: 75%; /* 75% z 600px = 450px */
    height: 50%; /* 50% z 400px = 200px */
    background-color: lightcoral;
  }

• max-content: Szerokość/wysokość dopasowuje się do największej niełamanej szerokości/wysokości treści.
• min-content: Szerokość/wysokość dopasowuje się do najmniejszej możliwej szerokości/wysokości treści (np. szerokość najdłuższego słowa).
• fit-content(<długość>): Stara się dopasować do treści, ale nie przekracza podanej długości.

Wartości max-content, min-content i fit-content są nowsze i mogą nie być w pełni wspierane we wszystkich scenariuszach lub starszych przeglądarkach.

Właściwości min-* i max-*

Oprócz width i height, istnieją bardzo przydatne właściwości pozwalające ustawić minimalne i maksymalne wymiary elementu:

• min-width: Minimalna szerokość elementu. Element nie będzie węższy niż ta wartość, nawet jeśli jego zawartość lub wartość width sugerowałaby inaczej.
• max-width: Maksymalna szerokość elementu. Element nie będzie szerszy niż ta wartość, nawet jeśli jego zawartość lub wartość width (np. 100%) sugerowałaby inaczej. Bardzo przydatne w responsywnym designie, np. max-width: 1200px; margin: 0 auto; dla głównego kontenera strony.
• min-height: Minimalna wysokość elementu. Element nie będzie niższy niż ta wartość.
• max-height: Maksymalna wysokość elementu. Element nie będzie wyższy niż ta wartość. Może powodować ukrycie lub pojawienie się paska przewijania (jeśli ustawiono overflow).

Właściwości min-* i max-* mają **wyższy priorytet** niż width i height. Jeśli ustawisz width: 100px; i min-width: 200px;, element będzie miał co najmniej 200px szerokości.

.container {
  width: 80%; /* Szerokość 80% rodzica */
  max-width: 960px; /* Ale nie więcej niż 960px */
  min-width: 300px; /* I nie mniej niż 300px */
  margin: 0 auto; /* Wycentrowanie */
}

.resizable-box {
  width: auto;
  min-height: 100px; /* Zawsze co najmniej 100px wysokości */
  max-height: 500px; /* Nie więcej niż 500px wysokości */
  overflow: auto; /* Pokaż paski przewijania, jeśli treść się nie mieści */
}

width i height dla elementów inline

Właściwości width i height **nie mają bezpośredniego wpływu** na elementy wyświetlane jako inline (np. <span>, <a>, <strong>). Ich wymiary wynikają wyłącznie z zawartości.

Aby móc ustawić szerokość i wysokość dla elementu, który normalnie jest inline, musisz zmienić jego właściwość display na:

• block: Element zachowuje się jak blok (zajmuje całą szerokość, powoduje łamanie linii).
• inline-block: Element zachowuje się jak inline (układa się w linii z innymi), ale można mu nadać width, height, padding, border i margin jak elementowi blokowemu.

span.button-like {
  display: inline-block; /* Pozwala ustawić wymiary i padding */
  padding: 10px 20px;
  background-color: dodgerblue;
  color: white;
  border-radius: 5px;
  /* width: 150px;  Można też ustawić stałą szerokość */
}