اندازه جعبه CSS

در این مقاله با ویژگی اندازه جعبه CSS آشنا می شویم.

توضیح اندازه جعبه CSS

ویژگی اندازه جعبه برای مشخص کردن اینکه مقادیر ارتفاع و عرض دقیقاً شامل چه مواردی است استفاده می شود:

div {
    box-sizing: border-box;
    width: 200px;
    height: 300px;
    border: 2px solid green;
}

نحو box-sizin:

دو ویژگی وجود دارد که می توانید برای این ویژگی CSS استفاده کنید:

box-sizing: محتوا-جعبه؛ / box-sizing: حاشیه-جعبه؛

.content-box { 
    box-sizing: content-box;
} 

.border-box { 
    box-sizing: border-box; 
}

محتوا-جعبه مقدار پیش فرض اندازه جعبه در CSS است. این بدان معنی است که مقادیر عرض و ارتفاع فقط شامل محتوا است. این شامل حاشیه ، حاشیه ، یا پر کردن نیست. اگر تنظیم شده باشد که عنصر شما X پیکسل عرض و Y پیکسل بلند باشد ، اندازه نهایی آن با حاشیه و padding در واقع فضای بیشتری را اشغال می کند.

Border-Box به معنی مقادیر عرض و ارتفاع شامل محتوا ، حاشیه و پدینگ است. با این حال حاشیه را شامل نمی شود. این گزینه اندازه جعبه کار با طرح بندی را ساده می کند ، زیرا همیشه می توانید از اندازه نهایی مطمئن باشید.

برای داشتن ایده بهتر در مورد اندازه در CSS ، مثالی را در جدول زیر مشاهده کنید:

توجه: مقدار padding-box برای خاصیت CSS اندازه جعبه گذشته استفاده می شد ، اما از آن زمان به بعد منسوخ شده است.

پشتیبانی از مرورگر

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.