Свойството box-sizing в CSS3 ни позволява да вмъкване padding & рамка в общата широчина и височина на елемента. Тази мощна концепция дава огромна гъвкавост на дизайнерите при разработката на визията на уебсайт.
Box-Sizing се поддържа от следните версии на браузърите:
- Chrome: 10.0. (1)
- IE: 8.0.
- Mozilla Firefox: 29.0. (2)
- Safari: 5.1. (3)
- Opera:9.5.
(1)(3) В Chrome и Safari поддръжката се осъщестява чрез добавяне на представката -webkit-, тоест по следния начин:
- -webkit-box-sizing:border-box;
В (2) Mozilla Firefox това става чрез добавяне на представката -moz-, тоест така:
- -moz-box-sizing:border-box;
Във видеото по-долу съм обяснил в детайли по какъв начин работи box-sizing:border-box; не го пропускайте :)