box-sizing

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

هر عنصر از لحاظ مدل قسمت بندی دارای چهار ناحیه است که این نواحی شامل ناحیه محتوا (content-box), ناحیه فاصله داخلی (padding-box) و ناحیه حاشیه (border-box) و در نهایت ناحیه فاصله خارجی یا (margin-box) هستند.

box-areas.png

در حالت عادی و پیشفرض زمانی که عرض و ارتفاع یک عنصر تعیین می شود این اندازه ها به ناحیه محتوا (content-box) تعلق پیدا می کنند. حال فرض کنید می خواهیم متنی را در همان عنصر قرار دهیم. قطعا نیاز به یک فاصله داخلی (padding) برای ایجاد یک فضا بین حاشیه عنصر و متن داریم. زمانی که این فاصله داخلی را اعمال کنیم عرض و ارتفاع عنصر تحت تاثیر قرار گرفته و دیگر آن مقادیری که ما تعیین کرده بودیم, نخواهند بود. مثال زیر را در نظر بگیرید.


div {
  width: 250px;
  height: 200px;
  padding: 50px;
}

در این مثال ما در واقع عرض عنصر را 250 و ارتفاع آن را 200 در نظر گرفته ایم اما در مدل پیشفرض به دلیل اضافه شدن padding که از هر طرف 50px می باشد در نهایت عنصر ما دارای عرض 350px و ارتفاع 300px خواهد بود.
حال فرض کنید بخواهیم یک border هم به این عنصر اضافه کنیم, داریم:


div {
  width: 250px;
  height: 200px;
  padding: 50px;
  border: 10px solid red;
}

اندازه این border هم به عرض و ارتفاع عنصر اضافه می شود و در نهایت عرضی به اندازه 370px و ارتفاع 320px خواهیم داشت.

در روش های قدیمی صفحه آرایی که اندازه ها محدود و ثابت بودند غالبا با این روش و مدل مشکلی در پیاده سازی نبود اما امروزه که صفحات پویا طراحی می شوند پیروی از این مدل سختی های خاص خود را دارد.

box-sizing

خوشبختانه در CSS3 ویژگی ای وجود دارد به نام box-sizing که به ما این اجازه را می دهد که در نحوه اعمال اندازه ها بر روی عناصر کنترل داشته باشیم. مقادیری که می توان به این ویژگی داد شامل content-box و padding-box و border-box می باشد. که مقدار پیشفرض آن content-box می باشد که عملکردش را در بالا در قالب یک مثال بررسی کردیم.

حال فرض کنید box-sizing را روی مقدار padding-box تنظیم کنیم و مثال بالا را دوباره با همان اندازه ها تکرار کنیم.


div {
  box-sizing: padding-box;
  width: 250px;
  height: 200px;
  padding: 50px;
}

این بار عرض نهایی عنصر همان 250px و ارتفاع هم 200px بدون تغییر باقی خواهد ماند در واقع مقدار عرض و ارتفاع شامل اندازه padding هم می شود. تصویر زیر نتیجه این مثال را در دو مدل content-box و padding-box نشان می دهد.

padding-box

حال اگر مقدار border به اندازه 10px به این عنصر اضافه کنیم این مقدار دوباره باعث افزایش اندازه نهایی عنصر می شود اما اگر بخواهیم اندازه border هم مانند اندازه padding موجب افزایش اندازه نهایی عنصر نشود کافی است مقدار ویژگی box-sizing را border-box قرار دهیم.


div {
  box-sizing: border-box;
  width: 250px;
  height: 200px;
  padding: 50px;
  border: 10px solid red;
}

تصویر زیر گویای مساله خواهد بود:

border-box

امروزه برای طراحی راحتر و عدم وجود نگرانی برای محاسبه مقادیر border و padding از این روش بیشتر استفاده می شود:


  box-sizing: border-box;

توجه داشته باشید که برای شروع یک پروژه, یکی از اولین کارها در CSS تعیین مدل box-sizing می باشد که بنا به تجربه و حتی با توجه به معروف ترین فریمورک های سمت کلایت مثل foundation و bootstrap بهترین روش استفاده از border-box برای تمام عناصر صفحه می باشد.

نکته خیلی مهم

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


  * {
    box-sizing: border-box;
  }

اگر بخواهیم کمی با امنیت بیشتری کار کنیم انتخابگرهای after و before را هم برای تمام عناصر بر روی این مدل تنظیم می کنیم.


  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

فریمورک bootstrap از این روش استفاده کرده است که این موضوع جزو نقاط ضعف این فریمورک محسوب می شود.
فرض کنید قرار است ماژول یا کامپوننتی را که از روش پیشفرض یعنی همان content-box استفاده کرده است را به پروژه ای اضافه کنید که آن پروژه به روش بالا و همان روش bootstrap عمل می کند. در اینجا شما مجبور خواهید بود یا برای تمامی عناصر مقدار box-sizing خود که همان content-box هست را تعیین کنید و یا مدل صفحه آرایی ماژول خود را به کلی تغییر داده و به روش border-box کار کنید که تمامی اندازه های شما تحت تاثیر قرار خواهد گرفت که این یک کابوس در زمان قرار دادن یک ماژول در یک پروژه محسوب می شود.

روش صحیح که فریمورک foundation هم از آن استفاده می کند روش زیر است. پس بهترین روش این است که در اول فایل CSS هر پروژه خطوط زیر را قرار دهید.


html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

با این روش اگر قرار باشد ماژولی یا کامپوننتی که از روش متفاوتی در مورد box-sizing استفاده کرده است را وارد پروژه خود کنید کافی است مقدار box-sizing بالاترین عنصر را در آن ماژول تعیین کنید و فرزندان آن عنصر از مقدار box-sizing آن عنصر ارث خواهند برد و دیگر نیازی به تعیین box-sizing برای تک تک آن ها و یا تغییر اندازه های آن ها نخواهد بود.

مقدار padding-box به مدت کوتاهی توسط فایرفاکس پشتیبانی شد که در نسخه 50 حذف شد. پس از این مقدار استفاده نکنید.

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

IE7 قادر به تشخیص این ویژگی نیست. IE8 این ویژگی را پشتیبانی می کند فقط زمانی که عرض و ارتفاع یک عنصر به صورت min یا max تعیین شوند IE8 box-sizing را روی آن عنصر اعمال نمی کند. در کل بهتر است برای پشتیبانی بهتر مرورگرها از prefix استفاده کنید:


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

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
     -moz-box-sizing: inherit;
          box-sizing: inherit;
}

همچنین می توانید از این پلیفیل برای پشتیبانی این ویژگی در مرورگرهای ie7 و حتی ie6 استفاده کنید.

برای یادگیری بهتر این ویژگی یک زمین بازی در لینک زیر آماده شده است. این محیط در این مطلب معرفی شده است.

بریم بازی

مطالب مرتبط

40 دیدگاه برای “box-sizing”

  5. من با clearfix به روش after آشنا هستم، همینطور مثال های w3school رو هم دیدم ولی هیچ وقت border-box رو با after متوجه نشدم! میشه بیشتر توضیح بدید

    پاسخ

    1. بحث های clearfix و boxsizing دو مبحث جدا هستند. یک نگاه سریع به این http://css-tricks.ir/after-… داشته باشید.

      خلاصه بخوام بگم اینکه شما باید توجه داشته باشید که after , before هم تاحدودی کاراییشون شبیه به بقیه عناصر هست پس در اینجا وقتی ما در شروع هر پروژه تمام عناصر(*) رو به حالت border-box تبدیل می کنیم نیازه که برای یک پارچه سازی after , before تمام عناصر هم به حالت border-box تبدیل بشن.

      پاسخ

      1. ممنون از پاسختون اما من متوجه نشدم! میشه یه مثال بزنید.
        اگه طراحی ما تماما فلکس باشه دیگه نیازی به border-box نیست، درست میگم؟

        پاسخ

        1. ببینید ما از box-sizing برای راحتی خودمون در مورد اندازه های باکس ها در زمان طراحی استفاده میکنیم. وقتی مقدارشو به border-box تغییر میدیم دیگه نگران اندازه های داخلی و حاشیه ها و غیره نیستیم. و الزامی برای استفاده از این روش هم نیست . همه چی بستگی به خود طراح داره ک با کدوم روش راحت تره. در مورد استفاده از این در طراحی فلکس هم همینه. میتونید استفاده کنید یا نکنید. به خودتون بستگی داره ک با کدوم روش راحترین. ولی اگر درک درستی از box-sizing پیدا کنید واضحه ک border-box کردن تمام عناصر به مراتب سرعت کارتون رو بیشتر میکنه.

          پاسخ

          1. من از border-box و after, before استفاده میکنم ولی وقتی با هم باشن رو درک نمیکنم!

            ببخشید من بد نوشتم؛ ببخشید دوباره میپرسم، این دستور یعنی قبل و بعد عنصر حالا * ، یه عنصر کاذب ایجاد کن و border-box ش کن؟ یعنی چی؟ اصلا درک نمیکنم!

            در رابطه با فلکس آشنایی عملی ندارم واسه همین ابهام داشتم؛ آموزش هایی از lynda گرفتم درآینده نگاه میکنم. ممنون

          2. یعنی اینکه “اگر” عنصری after و before داشت after و beforeش رو هم به مدل border-box تبدیل کن.

          4. شما در مثالتون عناصر after و before رو نساختید فقط گفتید اگر ساخته شد مدلشون border-box باشه.

            حالا این مثال رو چک کنید که در اون after ساخته شده و به دو نوع مختلف box-sizing که بتونید خوب مقایسه کنید نمایش داده شده. http://jsbin.com/pawatuluxe…

            دوست عزیز حتما مقاله after و before رو یک بار دیگه نگاه کنید. اگر باز هم مشکلی بود من در خدمتم.

          5. چیزهای جدید یادگرفتم، مثال رو هم درک کردم اما هنوز متوجه دستور بالا نمیشم!
            یعنی، دستور بالا وقتی عمل میکنه که ما عنصری رو با after,before ایجاد کزده باشیم؟! آخه جه لزومتی داره!

          6. اون دستور واسه اینه که ما در اول کار تعیین کنیم که در هرجای طراحی ما
            از عناصر after , before استفاده شد مدل border-box روشون اعمال بشه. که
            دیگه هر دفعه نگران مدل باکسشون نباشیم. و فقط یه بار بنویسیم. این بحث یکم
            نیاز به تجربه کاری داره که من مطمئنم بعد یه مدت کاملا واستون روشن میشه.

  6. من با clearfix به روش after آشنا هستم، همینطور مثال های w3school رو هم دیدم ولی هیچ وقت border-box رو با after متوجه نشدم! میشه بیشتر توضیح بدید

    پاسخ

    1. بحث های clearfix و boxsizing دو مبحث جدا هستند. یک نگاه سریع به این http://css-tricks.ir/after-… داشته باشید.

      خلاصه بخوام بگم اینکه شما باید توجه داشته باشید که after , before هم تاحدودی کاراییشون شبیه به بقیه عناصر هست پس در اینجا وقتی ما در شروع هر پروژه تمام عناصر(*) رو به حالت border-box تبدیل می کنیم نیازه که برای یک پارچه سازی after , before تمام عناصر هم به حالت border-box تبدیل بشن.

      پاسخ

      1. ممنون از پاسختون اما من متوجه نشدم! میشه یه مثال بزنید.
        اگه طراحی ما تماما فلکس باشه دیگه نیازی به border-box نیست، درست میگم؟

        پاسخ

        1. ببینید ما از box-sizing برای راحتی خودمون در مورد اندازه های باکس ها در زمان طراحی استفاده میکنیم. وقتی مقدارشو به border-box تغییر میدیم دیگه نگران اندازه های داخلی و حاشیه ها و غیره نیستیم. و الزامی برای استفاده از این روش هم نیست . همه چی بستگی به خود طراح داره ک با کدوم روش راحت تره. در مورد استفاده از این در طراحی فلکس هم همینه. میتونید استفاده کنید یا نکنید. به خودتون بستگی داره ک با کدوم روش راحترین. ولی اگر درک درستی از box-sizing پیدا کنید واضحه ک border-box کردن تمام عناصر به مراتب سرعت کارتون رو بیشتر میکنه.

          پاسخ

          1. من از border-box و after, before استفاده میکنم ولی وقتی با هم باشن رو درک نمیکنم!

            ببخشید من بد نوشتم؛ ببخشید دوباره میپرسم، این دستور یعنی قبل و بعد عنصر حالا * ، یه عنصر کاذب ایجاد کن و border-box ش کن؟ یعنی چی؟ اصلا درک نمیکنم!

            در رابطه با فلکس آشنایی عملی ندارم واسه همین ابهام داشتم؛ آموزش هایی از lynda گرفتم درآینده نگاه میکنم. ممنون

  10. سلام
    من یه سوالی داشتم !
    اصلا چه لزومی به ایجاد box-sizing هست ! وقتی ما اونو روی border-box تنظیم میکنیم
    خوب اون موقع طول و عرض عنصرمون کوچیک میشه و padding و border جاشو میگیره !!

    پاسخ

    1. سلام.

      بحث کوچیک و بزرگ تر شدن نیست. بحث راحتی کار هستش. که به این روش راحت تره. ولی مجبور نیستید از اون استفاده کنید.

      فقط اگر یه زمانی بخواین با یک تیمی کار کنید چون همه از این روش تقریبا استفاده می کنند اونجاست که مشکل پیش میاد براتون.

      پاسخ

  11. در ورژن چهار بوت استرپ نیز از border-box استفاده شده است.اما نوشته ممکن در بعضی چیزها مشکل به وجد بیاد میتونید یکم بیشتر توضیح بدین؟
    For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

    پاسخ

    1. منظورش اینه که با اعمال box-sizing نوع border-box روی عناصر اون موردها امکان اینکه توی اندازه هاشون و در نتیجه چیدمانشون اختلال ایجاد بشه هست. مفهموم box-sizing رو خوب بفهمیدش بعدش اگر مشکلی هم بخورید راحت حلش میکنید.

      پاسخ

  12. سلام ممنون از آموزشات خوبتون اگه امکانش هست لطفا درباره Foundation هم آموزشی بزارید که بتونیم ازش استفاده کنیم من هیچی ازش سردرنمیارم ممنون از آموزشات خوبتون .

    پاسخ

  14. سلام
    ممنون از آموزش ها و سایت خوبتون،واقعا آموزش هاتون عالیه آقای سیدی
    یه سوال داشتم که فکر کنم padding-box هیچ کاری نمیکنه یعنی اینکه box-sizing فقط دو مقدار content-box(پیشفرض) و border-box را انجام میده و عملا با padding-box هیچ تغییری نمیکنه،چون من هرچی انجام میدم هیچ تغییری با padding-box انجام نمیشه،دلیلش چیه؟

    پاسخ

  16. سلام و متشکر به خاطر مقاله های خوب تون. یه سوال:
    چرا برای margin هیچ فکری نشده؟ چون اون هم می تونه توی سایز نهایی آبجکت مون موثر باشه

    پاسخ

  17. با سلام
    چطور میشه فهمید که در کد های cssیا js به کار برده شده در صفحه وب مربوط به کدام یک از المان ها هستش
    یا مثلا فلان تکس باکس از فلان سی اس اس ارث برده
    چون من فایل های سی اس اس زیادی دارم و تک باکس های زیادی!!!
    ممنون

    پاسخ

  18. سلام
    من وقتی اون آخرین کد مقاله رو به فایل css اضافه می‌کنم مرورگر مقدار box-sizing:inherit رو نادیده می‌گیره.
    و تو کنسول می‌بینم که موقع اجرا ، این دستور اصلا خط می‌خوره.
    فکر کنم وقتی مرورگر این کار رو انجام می‌ده به این معنی که این کار غیر مجازه و این دستور در این حالت نامعتبره!

    پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *