border-box

שיטה לחישוב רוחב וגובה אלמנט, כולל גבולות וריפוד.



מה זה 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>
    

עוד בקטגוריה Box Model (מודל הקופסה)

תגובות

רק רגע

שיתוף