عوض کردن padding بدون تغییر عرض با box-sizing در CSS

آیا تاکنون توجه کرده اید که با تغییر padding یک تگ html در CSS، به عنوان مثال تگ div، اندازه عرض (width) آن نیز تغییر می کند، بخصوص زمانی که padding را افزایش می دهید، ناگزیر عرض (width) آن نیز افزایش میابد.

برای جلوگیری از این مشکل و ثابت نگه داشتن اندازه تعیین شده المان HTML، یعنی عرض (width) و ارتفاع (height) آن، می توانید از تکه کد زیر استفاده نمایید:

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

علامت ستاره به معنی انتخاب تمامی تگ های HTML می باشد، یعنی تمامی تگ های HTML شامل این دستور خواهند بود.

ویژگی box-sizing در CSS

این ویژگی و خاصیت، اندازه و سایزی را که مرورگر باید برای یک تگ HTML در نظر بگیرد را تعیین می کند.

مقادیر قابل استفاده برای ویژگی box-sizing به شرح زیر می باشند:

content-box: این مقدار پیشفرض می باشد،

border-box: تغییر مقدار padding در این حالت هیچ تغییری در اندازه تگ استفاده شده نخواهد شد.

initial: مقدار پیشرفض را قرار می دهد.

inherit: مقدار تگ پدر (تگ بیرونی) خود را به ارث می برد.