Проте, висота, задана у відсотках, для вертикальних властивостей елемента розраховується інакше, ніж процентні значення у інших властивостей.
Правила для вертикальних властивостей заданих у відсотках:
- Процентне значення для верхнього / нижнього поля (margin) або відступу (padding) залежить від ширини блоку-батька.
- Процентне значення для висоти елемента залежить від висоти блоку-батька (також для min / max висоти). Крім цього, якщо висота елемента-предка, від якого йде розрахунок, дорівнює auto. і даний елемент не є абсолютно позиційованим (height: відсотки), то і висота самого елемента стане рівною auto незалежно від зазначених відсотків.
- Як ви пам'ятаєте, для висоти значення за замовчуванням - auto.
- Процентне значення для властивостей top і bottom у позиціонується залежить від висоти блоку-батька.
- Процентні значення не можна використовувати для кордонів (border)
Нижче наведено приклад, де у відсотках задані значення для властивостей top / bottom padding / margin у елемента, поміщеного в контейнер з фіксованою шириною.
Відзначте, я використовую jQuery, щоб обчислити і показати висоту, включаючи відступ, елемента. Ширина елемента-батька (1000px) і відступи (по 100px) у самого елемента задані гранично просто, щоб вам легше було уявити процес обчислення вертикальних властивостей, чиї значення задані у відсотках.
Як бачите, загальна висота блоку дорівнює 300px. де 100px висота блоку і по 100px для верхнього і нижнього відступу (10% від 1000px).
Якщо ширина блоку не задана, то розміри для верхнього / нижнього поля (margin) або відступу (padding) будуть залежати від ширини вікна браузера.
Чому залежить від ширини контейнера?
Розмірковуючи про те, чому вертикальний padding і margin. заданий в процентах, залежить від ширини блоку-батька, я прийшов до висновку - через контроль.
Піду далі і скажу, що задавати висоту елемента це погана практика (min-height нормально). Таким чином, якщо ви захочете поставити вертикальний margin / padding, було б не інтуїтивно встановлювати значень у вищенаведених властивостей в залежності від довільного вмісту. Замість цього, набагато простіше зробити обчислення на основі ширини - це більш явно і ширина, як правило, задана, а якщо й ні, то зрозуміло від чого йде залежність.