מה זה border-box?

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

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

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

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

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

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

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

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

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