Властивості width і height: розміри елемента - підручник CSS
Для того щоб об'єкту можна було задати певну ширину і висоту, в CSS існують дві властивості - width і height (відповідно). З їх допомогою ви можете встановлювати фіксовані розміри елементів, будь-то сайдбар, зображення, таблиця або будь-який блок.
Особливості обчислення ширини і висоти
Для визначення ширини або висоти об'єкта можна використовувати будь-які одиниці вимірювання довжини в CSS. Найбільш прості в розумінні пікселі. Якщо ви використовуєте процентну запис, майте на увазі, що в цьому випадку ширина об'єкта буде залежати від ширини його батька. Якщо такого немає, то ширина елемента обчислюється, виходячи з ширини вікна браузера (при зміні користувачем ширини вікна значення width буде перераховано).
Як значення ширини можна використовувати і одиницю em, яка є приблизно тим же, чим і розмір шрифту тексту, але тільки в умовних одиницях. Наприклад, ви встановили розмір для шрифту 24px. Тоді 1em для цього елемента буде дорівнює 24 пікселів, а якщо ви задасте width: 2em, то ширина складе 2 × 24px = 48 пікселів. Якщо розмір шрифту не заданий, він буде успадкований.
Висота height, задана у відсотках, обчислюється аналогічним чином, що і ширина, але розрахунок ґрунтується вже на висоті батьківського елемента, а не на його ширині. Якщо той з батьків відсутній, висота буде залежати від висоти вікна браузера.
Відсоткова ширина і висота дочірнього елемента обчислюються на підставі розмірів батька
Що входить в ширину і висоту
Відразу варто запам'ятати, що у властивостей width і height є особливість - вони не включають в себе значення margin, padding і border. Значення, яке ви встановите для width / height, означатиме лише ширину / висоту області вмісту елемента.
Таким чином, для того щоб