Назад Вперед Зміст

Властивості для задання розмірів

Властивостями CSS, які використовують для вказівки розмірів елементів, є width та height.

Значення цих властивостей — число з одиницями виміру.

Ці властивості можна потім поєднувати з розмірами контенту (вмісту) елементів за допомогою властивості overflow.

Ці властивості використовуються переважно для блочних елементів. З лінійних елементів вони застосовуються для зображень.

Задання розмірів зображення

Розмістимо на сторінці два зображення. Ці зображення мають різні розміри. Задамо для них однаковий розмір 210 на 195 пікселів.

Друге зображення трохи спотворилось.

Ширина елемента

Задамо ширину одного абзацу у вигляді 20% від ширини вікна.

Висота елемента

Задамо висоту одного абзацу у вигляді 70pt.

Вміст цього абзацу не поміщається у ці розміри. Тому наступний абзац розташовується поверх цього абзацу.

Дії при переповненні розмірів елемента

Коли задано властивість елемента width або height, іноді потрібно розглянути, які потрібні результати у випадку, коли контент цього елемента займає більше простору, ніж доступно. Для обробки таких ситуацій призначене властивість overflow і чотири його допустимі значення:

1. visible (за замовчуванням). Контент одного елемента може відображатися впереміш з контентом його сусідів.
2. hidden. Весь контент, який знаходиться за межами елемента, буде прихований від перегляду.
3. auto. У разі потреби створюються смуги прокрутки, щоб зробити невидимий контент доступним відвідувачу.
4. scroll. В елемент будуть вбудовані вертикальна і горизонтальна смуги прокрутки, навіть якщо вони не потрібні.

Значення overflow: hidden

Значення overflow: auto

Смуга прокрутки створюється у разі потреби.

Значення overflow: scroll

Смуга прокрутки створюється завжди.