اندازه جعبه (Box) در CSS

ویژگی box-sizing اجازه می دهد تا تغییراتی در عتصر شامل پوشش و حاشیه در عرض و ارتفاع داشته باشیم.

بدون ویژگی box-sizing

به طور پیش فرض، عرض و ارتفاع یک عنصر به این صورت محاسبه می شود:

width + padding + border = عرض واقعی یک عنصر
height + padding + border = ارتفاع واقعی یک عنصر

این به این معنی است: هنگامی که عرض / ارتفاع یک عنصر را تعیین می کنید، عنصر بزرگتر از آنچه شما تعیین کرده اید به نظر می رسد (زیرا حاشیه و پلاگین عنصر به عرض / ارتفاع مشخص شده عنصر اضافه می شود).

تصویر زیر نشان می دهد دو عنصر <div> با همان عرض و ارتفاع مشخص:

دو عنصر <div> بالا در نتیجه با اندازه های مختلف در نتیجه (به عنوان div2 دارای padding مشخص شده):

بدون box-sizing
.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
}
مشاهده مثال

ویژگی box-sizing این مشکل را حل می کند.

با ویژگی box-sizing

ویژگی box-sizing  ما را قادر می سازد تا حاشیه وسط را در عرض و ارتفاع کلی عنصر قرار دهیم.

اگر شما ;box-sizing: border-box در یک عنصر padding و شامل حاشیه در عرض و ارتفاع باشد:

در اینجا همان مثال فوق را با ;box-sizing: border-box هر دو عنصر <div> اضافه شده است:

با box-sizing
.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}
مشاهده مثال

از آنجا که نتیجه استفاده از ;box-sizing: border-box خیلی بهتر است، بسیاری از توسعه دهندگان می خواهند همه عناصر در صفحات خود به این روش کار کنند.

کد زیر تضمین می کند که تمام عناصر در این روش بصری بیشتر اندازه به نظر میرسند. بسیاری از مرورگرها از box-size استفاده می کنند: ;box-sizing: border-box برای بسیاری از عناصر فرم کاربرد دارد(اما نه همه - به همین دلیل است که ورودی ها و زمینه های متن با عرض متفاوت متفاوتند: 100٪؛).

اعمال این به همه عناصر امن و عاقلانه است:

اعمال به همه
* {
    box-sizing: border-box;
}
مشاهده مثال

 

ویژگی
شرح
box-sizing
تعریف می کند که چگونه عرض و ارتفاع یک عنصر محاسبه می شود: آیا آنها شامل حاشیه و مرز هستند یا خیر

نظر شما

یادگیری CSS یادگیری CSS

مقدمه ای بر CSS ترکیب کدهای CSS CSS چگونه کار میکند؟ رنگ ها در CSS پس زمينه در CSS خط حاشيه ( border ) در CSS margin (حاشیه) در CSS صفت padding در CSS عرض و ارتفاع در CSS مدل جعبه ای CSS outline در CSS متن در CSS فونت ها در CSS آیکون ها در CSS لینک ها در CSS لیست ها در CSS جدول در CSS نمايش در قالب بندی CSS حداكثر عرض در CSS صفت position در CSS صفت overflow در CSS صفت float در CSS بلوک اینلاین در CSS تراز بندی در CSS combinator در CSS Pseudo-classes در CSS Pseudo-Elements در CSS تاری و شفافیت در CSS منو ناوبری در CSS کرکره ها در CSS ابزار راهنما (tooltip) در CSS گالری تصاویر در CSS اسپرایت تصویر در CSS سلکتور های صفات در CSS فرم ها در CSS شمارشگر ها در CSS معرفی CSS3 گوشه های گرد در CSS3 حاشیه های تصویری در CSS3 پس زمینه در CSS3 رنگ ها در CSS3 گرادیانت در CSS3 سایه در CSS3 متن در CSS3 فونت ها در CSS3 ترنسفرم های دوبعدی در CSS3 ترنسفرم های سه بعدی CSS3 انتقال در CSS انیمیشن در CSS Tooltip در CSS استایل تصویر در CSS ویژگی object-fit در CSS دکمه ها در CSS صفحه بندی در CSS چندستونی در CSS رابط کاربری CSS متغیرهای CSS اندازه جعبه (Box) در CSS Flexbox در CSS کوئری Media در CSS مثال کوئری Media در CSS طراحی ریسپانسیو وب – مقدمه طراحی ریسپانسیو وب – viewport طراحی ریسپانسیو وب – Grid-View طراحی ریسپانسیو وب – کوئری Media طراحی ریسپانسیو وب – تصاویر طراحی ریسپانسیو وب – ویدیو طراحی ریسپانسیو وب – چارچوب (Frameworks) چیدمان شبکه ای در CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز