Szerokość i wysokość elementów

Szerokość i wysokość elementów

W CSS możesz bardzo precyzyjnie kontrolować rozmiar elementów na stronie. Do tego służą właściwości width (szerokość) i height (wysokość).

Dzięki nim możesz ustawić, jak duży będzie nagłówek, kontener, obrazek czy przycisk – i dostosować układ strony do swoich potrzeb.

1. width – szerokość

width określa szerokość elementu. Domyślnie elementy blokowe (np. <div>) zajmują 100% dostępnej przestrzeni, ale możesz to zmienić.

Przykład:

.box {
  width: 300px;
  background-color: lightblue;
}

<div class="box">To jest div o szerokości 300px</div>

Efekt:

Możesz podawać szerokości w różnych jednostkach, np.:

• px – piksele
• % – procenty względem elementu nadrzędnego
• em, rem – jednostki względne

2. height – wysokość

height ustala wysokość elementu. Jeśli nie ustawisz tej właściwości, element automatycznie dopasuje wysokość do zawartości.

Przykład:

.kontener {
  height: 100px;
  background-color: #ffd54f;
}

<div class="kontener">To jest kontener o wysokości 100px</div>

Efekt:

Podobnie jak w przypadku szerokości, możesz używać pikseli, procentów lub jednostek względnych.

3. min-width / max-width, min-height / max-height

Czasem chcesz, aby element nie był mniejszy lub większy niż określony rozmiar. Służą do tego dodatkowe właściwości:

• min-width / max-width
• min-height / max-height

Przykład:

.responsywny-box {
  width: 80%;
  max-width: 600px;
  background-color: #c5e1a5;
}

Ten element będzie miał 80% szerokości, ale nie więcej niż 600px – dzięki czemu dobrze wygląda na dużych ekranach.

🎯 Ćwiczenie w JSFiddle

Wejdź na JSFiddle i przetestuj różne szerokości i wysokości:

HTML:

<div class="blok1">Szerokość: 200px</div>
<div class="blok2">Wysokość: 80px</div>
<div class="blok3">Max szerokość: 400px</div>

CSS:

.blok1 {
  width: 200px;
  background-color: #b3e5fc;
  padding: 10px;
  margin-bottom: 10px;
}

.blok2 {
  height: 80px;
  background-color: #ffccbc;
  padding: 10px;
  margin-bottom: 10px;
}

.blok3 {
  width: 90%;
  max-width: 400px;
  background-color: #dcedc8;
  padding: 10px;
}

Kliknij Run i zobacz, jak zachowują się elementy!

✅ Podsumowanie

• width i height pozwalają ustawić wymiary elementu
• Można używać jednostek: px, %, em, rem
• min- i max- pozwalają ustawić ograniczenia rozmiaru

W kolejnym temacie poznasz obramowania (border) oraz cienie (box-shadow), które dodadzą Twoim elementom stylu i głębi!