Переважно ми використовуємо теги , 
коли хочемо розділити сторінку

на декілька блоків, змінити їхній розмір
і перемістити їх.

Потрібно мати здібності до дизайну,
щоб вирішити, як саме розмістити

елементи на сторінці, щоб вона
мала гарний вигляд.

Але зараз ми забудемо про мету
зробити сторінку гарною,

і я вам просто покажу, як можна
змінювати елементи на сторінці.

Змінімо розмір тега  "official-info".

За замовчуванням він займає 100%
можливої ширини.

Тому ви бачите, що сірий блок
займає всю сторінку.

Але, можливо, я хочу, щоб він займав
лише 300 пікселів.

Я додам ще одну властивість до
правила CSS тут:

width: 300px;

Спрацювало, але зробімо
щось цікавіше.

Ми використаємо відсоткову ширину

і напишемо, що цей блок займатиме
70% можливої ширини.

Тепер текст поміщений
в менший блок,

і цей блок став вищий.

Якщо ми справді хочемо, ми можемо
також задати висоту блоку

за допомогою властивості "height":

height: 180 px;

Хмм, добре. Сталось щось смішне.

Сірий блок зменшився до 180 пікселів,

але текст виліз за його межі.

Чому так сталося?

Це через властивість, яку
ми називаємо "overflow" (переповнення).

Значення за замовчуванням 
для "overflow"— "visible" (видимий),

що означає, що елементи змінюють розмір,
але вміст може виходити за їхні межі,

що має трохи дурний вигляд.

Які інші можливості існують
для "overflow"?

Ми можемо спробувати "hidden"
(прихований).

Це обріже текст, який виходить
за межі блоку.

Однак це не те, що нам зараз потрібно,

тому що так наші глядачі не зможуть
побачити весь чудовий абзац.

Ми можемо спробувати "auto" (автоматичний),

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

Тепер я можу прокрутити текст всередині
блоку і побачити його повністю.

Якщо ми хочемо, ми можемо бути ще
більш точними:

ми можемо визначити різні властивості
переповнення для усіх напрямків.

Наприклад, якщо ми хочемо,

щоб текст рухався по осі у, вниз та вгору,

ми напишемо: overflow-y: auto;

але якщо ми хочемо обрізати його
по осі х,

ми напишемо: overflow-x: hidden;

Будьте обережні щоразу, як 
використовуєте властивість "overflow",

тому що лінії прокрутки можуть
бути дуже надокучливими для користувачів.

Особливо лінії прокрутки 
з лініями прокрутки —

уникайте цього, якщо можете.

Повертаючись до властивостей width/height,
ми насправді можемо їх використовувати

для всіх типів елементів, 
таких як зображення.

Тепер, коли ви знаєте CSS, ви можете
використовувати властивості CSS width/height,

замість атрибутів width/height.

Зробімо це зображення котика трохи 
більшим, додавши id "cute-cat" (милий-котик),

видаливши атрибути

і перейшовши до правила стилю.
Ми напишемо: #cute-cat {

width: 120 px };

Так само як було з атрибутами,

тут також краще визначати 
лише висоту або ширину

і дати браузеру обчислити найкраще
значення іншої величини.

В іншому випадку ми роздавимо котика!

Добре, це звучить доволі цікаво,
тому ми спробуємо всього на секундочку:

height: 40px;

Ха-ха, роздавлений котик, ура!

Добре, я вже позбулась
цього бажання.

Я буду відповідальним веб-розробником
і зараз це видалю.

Чим більше ви знаєте,

тим більш відповідальними ви маєте бути.

Те, що ви можете понаставляти всюди
ліній прокрутки

чи роздавити усіх котиків, не означає,
що вам слід так робити.

Тому що переважно ви робите
сайти і для інших людей,

і те, що ви вважайте веселим, може бути 
для них дуже складним у використанні.

Але якщо ви створите кілька веселих речей
тут, на сайті Khan Academy, я не заперечуватиму.

Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"