max-width

קובע את הרוחב המקסימלי של האלמנט.



מה זה max-width?

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

שימוש במאפיין max-width

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

דוגמה לשימוש ב-max-width

להלן דוגמה לשימוש במאפיין max-width:

תוכן עם רוחב מקסימלי של 500 פיקסלים

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

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

באמצעות max-width ניתן לשלוט בעיצוב פריסות רגישות (responsive) ולהתאים את הרוחב בהתאם לגודל המסך או קונטיינר.

אפשר להגדיר את זה לדוגמה כך

    <div style="max-width: 500px; width: 100%; border: 2px solid black; background: lightgray;">
                    תוכן עם רוחב מקסימלי של 500 פיקסלים
                  </div>
    

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

תגובות

רק רגע

שיתוף