טיפ קצר: Box-sizing: Border-box

בפוסט הקצר הזה אני אתמצת בקצרה פוסט שפרסם פול אייריש לפני כמה שבועות:

כידוע, כשמגדירים ב-CSS לאלמנט מסויים פרמטרים גם של רוחב כללי וגם של Padding – הדפדפן מוסיף את מידות ה-Padding על הרוחב הכללי של הקוביה. לדוגמא, אלמנט עם מאפיינים width:200px; padding:10px יהיה בפועל ברוחב של 220 פיקסלים, למרות שההגדרה היא לרוחב של 200 פיקסלים.

זה מצב מעט אבסורדי, כי אם למשל אני מגדיר רוחב של 200 פיקסלים – אני מצפה שהקוביה תהיה 200 פיקסלים רוחב, לא משנה מה השוליים הפנימיים של הקוביה. זה מקשה על חישובים מסויימים, ויוצר בעייתיות כשרוצים ליצור גריד מבוסס אחוזים (50% רוחב עם הגדרת Padding זה כבר לא חצי מהמסך).

הטריק שפול מציע זה להפעיל מאפיין CSS שמשנה את המצב הקיים, ומגדיר לדפדפן שלא להוסיף את מידות ה-Padding על הרוחב הכללי של הקוביה. זה נראה כך:

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

הסלקטור הזה בוחר את כל האלמנטים בדף, ומורה להם שלא להוסיף את מידות ה-Padding על מידות הרוחב הכלליות. קסם 🙂

המאפיין הזה נתמך בכל הדפדפנים המודרניים, לרבות דפדפן אקספלורר מגירסא 8 ומעלה. קיימים Polyfills שיוסיפו תמיכה לדפדפני אקפסלורר 6+7.

לפרטים מלאים וקריאה נוספת ניתן להיכנס לפוסט המקורי (אנגלית):
http://paulirish.com/2012/box-sizing-border-box-ftw/