1. Особливості обчислення ширини і висоти
2. Що входить в ширину і висоту

Для того щоб об'єкту можна було задати певну ширину і висоту, в CSS існують дві властивості - width і height (відповідно). З їх допомогою ви можете встановлювати фіксовані розміри елементів, будь-то сайдбар, зображення, таблиця або будь-який блок.

Особливості обчислення ширини і висоти

Для визначення ширини або висоти об'єкта можна використовувати будь-які одиниці вимірювання довжини в CSS. Найбільш прості в розумінні пікселі. Якщо ви використовуєте процентну запис, майте на увазі, що в цьому випадку ширина об'єкта буде залежати від ширини його батька. Якщо такого немає, то ширина елемента обчислюється, виходячи з ширини вікна браузера (при зміні користувачем ширини вікна значення width буде перераховано).

Як значення ширини можна використовувати і одиницю em, яка є приблизно тим же, чим і розмір шрифту тексту, але тільки в умовних одиницях. Наприклад, ви встановили розмір для шрифту 24px. Тоді 1em для цього елемента буде дорівнює 24 пікселів, а якщо ви задасте width: 2em, то ширина складе 2 × 24px = 48 пікселів. Якщо розмір шрифту не заданий, він буде успадкований.

Висота height, задана у відсотках, обчислюється аналогічним чином, що і ширина, але розрахунок ґрунтується вже на висоті батьківського елемента, а не на його ширині. Якщо той з батьків відсутній, висота буде залежати від висоти вікна браузера.

Відсоткова ширина і висота дочірнього елемента обчислюються на підставі розмірів батька

Що входить в ширину і висоту

Відразу варто запам'ятати, що у властивостей width і height є особливість - вони не включають в себе значення margin, padding і border. Значення, яке ви встановите для width / height, означатиме лише ширину / висоту області вмісту елемента.

Таким чином, для того щоб