20
تشکر

حل مشکل Padding با استفاده از box-sizing

CSS3

CSS3

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

ابتدا نگاهی به نوع اندازه گیری عرض و ارتفاع در حالت عادی اشاره میکنیم.

در حالت عادی اندازه داخلی یک عنصر یا content-box به صورت زیر محاسبه میشود.

Total Width = width + padding-left + padding-right + border-left-width + border-right-width
Total Height = height + padding-top + padding-bottom + border-top-width + border-bottom-width

همانطور که میبینید مقدارهای padding و border هم جزء عرض و ارتفاع محسوب میشوند. برای مثال در کد زیر ما یک دایو را در داخل یک دایو دیگر تعریف کرده ایم و مقدار عرض 50درصد را به آن داده ایم. اما میبینید که عرض آن در حالت واقعی 50درصد نیست.

چه طور این مشکل را درست کنیم؟

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

box-sizing: border-box;

بهتر است در ابتدای پروژه تان کد زیر را اضافه کنید تا در طول کل پروژه خیالتان راحت باشد.

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

این خاصیت به صورت شگفت انگیزی در همه مرورگرها به جز IE7 پشتیبانی میشوند. Can I use

من در آخرین پروژه ام از این مقدار استفاده کردم و دیگه ناراحت این نبودم که با افزایش مقدار Padding دوباره باید از عرض یا ارتفاع کم کنم. نظر شما چیست؟

  • احسان می‌گه:

    دم شما گرم. از این مصیبت خلاص شدیم !!!
    عالی بود واقعا…


  • نظرات این مطلب بسته است.