מה זה box-sizing?

המאפיין box-sizing ב-CSS קובע כיצד מחשבים את הרוחב והגובה של אלמנט. ברירת המחדל היא 'content-box', שבו רוחב וגובה האלמנט מתייחסים רק לתוכן. עם זאת, ניתן לשנות זאת ל-'border-box', שבו רוחב וגובה כוללים גם את גבולות והריפוד של האלמנט.

שימוש במאפיין box-sizing

באמצעות box-sizing ניתן לשלוט בצורה מדויקת יותר על חישוב הרוחב והגובה של האלמנט, מה שיכול להקל על ניהול פריסות בעיצוב אתרים.

דוגמה לשימוש ב-box-sizing

להלן דוגמה לשימוש במאפיין box-sizing:

בדוגמה זו, הרוחב הכולל של האלמנט הוא 200 פיקסלים, כולל ריפוד וגבולות.

שימושים מתקדמים

באמצעות box-sizing ניתן להבטיח שהאלמנטים ייכנסו לתוך התיבות המוגדרות, במיוחד בעת שימוש בעיצובים רגישים (responsive) או בפריסות מורכבות.

    <div style="box-sizing: border-box; width: 200px; padding: 20px; border: 5px solid black; background: lightgray;">
                    תוכן
                  </div>