021-28423015
021-28423015

اندازه جعبه (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

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط