Rozdział 2 · Zadanie 7

Blok div, width, height

Pusty prostokątny kontener — podstawa dla kart, plakietek, podkładek.

Zadanie

Dodaj do style.css:

style.css

.card {
  width: 300px;
  height: 150px;
  background-color: #e0f0ff;
  border: 2px solid #0066cc;
  border-radius: 12px;
  padding: 20px;
}

A w styles-demo.html

Dodaj:

styles-demo.html

<div class="card">
  <p>To tekst wewnątrz karty-bloku</p>
</div>

Jak to czytać

<div>...</div> — kontener, do którego wsadzić można cokolwiek.

width — szerokość, height — wysokość w pikselach. Wszystko, co już znasz (background-color, border, padding) działa i tutaj.

Warto wiedzieć

Jeśli tekst wewnątrz <div> nie zmieści się w zadanej wysokości — «wyleje się» poza blok, przeglądarka nie obcina automatycznie.

Wskazówka

Bez width/height blok sam dopasuje się do rozmiaru zawartości i rozciągnie na całą szerokość strony.

Kurs powstał dzięki wsparciu biura rachunkowego Galakton, Białystok, Polska