Властивості css width відповідає за значення ширини області з вмістом елемента.
Властивості css height відповідає за значення висоти області з вмістом елемента.
Як ширина, так і висота елементів може здаватися всіма доступними способами, які описані тут. або значенням auto. або значення inherit.
Негативні значення висоти і ширини вказувати не допускається.
Здавалося б, що з цими властивостями CSS все просто і зрозуміло, але, насправді, все виявляється не зовсім так просто.
Задавши якомусь елементу на веб-сторінці ширину за допомогою властивості width 500px це не означатиме, що загальна ширина цього елемента буде 500 пікселів і не більше.
Найголовніше, що потрібно розуміти, властивості width і height задають значення ширини і висоти для області з вмістом.
Властивості width і height - це всього-лише одні з складових з яких буде обчислюватися загальна ширина і висота елементу. Вони вказують ширину і висоту області Content, яку можна бачити на наступному зображенні. Також в формуванні загальної ширини і висоти беруть участь такі властивості як padding, margin і border.
У цьому можна легко зараз переконатися.
Давайте, для прикладу, візьмемо два блоки з однаковою шириною width, але одному з них поставимо додатково властивість padding.
За замовчуванням, веб-сторінки мають поведінку, що до значення висоти і ширини додається значення padding для відповідної сторони.
Тобто загальна ширина елемента буде складатися із значення властивості width елемента і до нею буде Плюсувати значення padding-left і padding-right.
Для різних типів елементів, які можна зустріти на сторінці загальна ширина і висота елементів вважається за спеціальними формулами.
Для різних типів елементів, які можна зустріти на веб-сторінках значення width і height можуть мати різну поведінку і значення.
Аналогічна ситуація буде з властивістю height.
В CSS є особливий алгоритм за яким обчислюється значення width і height для різних елементів на веб-сторінці. Я не буду зараз зупинятися на цьому алгоритмі, тому що він настільки складним.
Зараз для нас головне зрозуміти, що властивості width і height дозволяють працювати з шириною і висотою саме області з вмістом елемента, а не загальною шириною і висотою елемента.
