box-sizing در css

با سلام

خب box-sizing در css چیه و به چه دردی می خوره ؟

دقت کردین گاهی اوقات تو یه فرم میخوایین جعبه متنی و …. width هشمون ۱۰۰% باشه ولی وقتی شروع میکنین padding یا margin عنصرهای داخل یه فرم رو دستکاری بزنین درجا میبینین اندازشون خوب نمیشه و یا کم میشه یا زیاد یا از یه جا میزنه بیرون ؟

مثل زیر :

خب وقتی با شرایط مثل عکس بالا روبه رو میشین هرچقد این padding و margin لعنتی رو انگولک میکنین درست نمیشه و رو اعصاب ادم راه میره ، خب حالا راه حل چیه ؟ راه حل نه استفاده از شامپو پرژکه و نه روغن اویلا بلکه استفاده از box-sizing هست .

وقتی داخل کد css عنصرهایی که داخل یه عنصر دیگه ان  box-sizing رو برابر با border-box قرار بدین اون وقت از padding تمام عنصرهایی که داخل مثلا فرم قرار دارند صرف نظر میکنه و اون وقت فرمتون شبیه شکل زیر میشه :

این ویژگی تو css3 اضافه شد و خدا رحمت کنه به اموات این توسعه دهنده هاش که اینو اضافه کردن !

امیدوارم از طرز بیان مطلب استفاده برده باشین یا علی