سلام دوستان! امروز میخواهم درباره یک مفهوم کاربردی و مهم در دنیای CSS صحبت کنم که شاید خیلی ساده باشد ولی استفاده‌ی درست از آن میتواند طراحی‌های شما را بسیار حرفه‌ای و بدون دردسر کند. این ویژگی، box-sizing نام دارد. بسیاری از شما که تجربه طراحی وب دارید، شاید با مشکل تغییر اندازه عناصر بر اساس حاشیه‌بندی‌ها و پدینگ‌ها دست و پنجه نرم کرده‌اید. این موضوع میتواند باعث شود که ابعاد عناصر شما در صفحات وب به درستی مدیریت نشود.
ویژگی box-sizing راه‌حلی است که باعث می‌شود تعیین عرض و ارتفاع برای عنصری خاص، به درستی اعمال شود و مشکلات مربوط به اندازه‌گیری عناصر ناپدید شوند. حال می‌پرسید چگونه؟ هنگام استفاده از box-sizing: border-box؛ شما به مرورگر می‌گویید که اندازه‌هایی که برای یک عنصر تعریف کرده‌اید، شامل پدینگ و حاشیه‌ها نیز بشوند.
با فهمیدن box-sizing: border-box؛ دیگر لازم نیست نگران این باشید که آیا حاشیه و پدینگ، اندازه واقعی عنصر شما را تغییر داده‌اند یا نه. این میتواند در پیچیدگی‌های کدنویسی شما و درک راحت‌تر اندازه واقعی عناصر کمک شایانی بکند.
فرض کنید می‌خواهید یک دکمه را طراحی کنید و عرض مشخصی برای آن تعریف کرده‌اید. با استفاده از box-sizing: border-box، پدینگ و حاشیه تاثیری در اندازه ای که تعیین کرده‌اید ندارد و دکمه دقیقا به اندازه مورد نظر شما نمایش داده می‌شود.
بگذارید با یک مثال واقعی، این موضوع را بیشتر بررسی کنیم:
div {\r\n box-sizing: border-box;\r\n width: 200px;\r\n padding: 20px;\r\n border: 5px solid #000;\r\n}در این کد، با استفاده از box-sizing: border-box; اطمینان پیدا می‌کنیم که width کل عنصر شامل padding و border نیز می‌شود و مقدار 200px نهایی تغییر نمی‌کند.