המאפיין box-sizing: border-box
ב-CSS משנה את חישוב רוחב וגובה של אלמנט כך שיכלול גם את הגבולות והריפוד. זהו מצב שבו הרוחב והגובה המוגדרים של האלמנט כוללים את הגבולות והריפוד, ולא רק את התוכן.
באמצעות 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>
רק רגע