מה זה display?

המאפיין display ב-CSS מגדיר את הדרך בה האלמנט מוצג בדף. הוא משפיע על איך האלמנט מתנהג ביחס לאלמנטים אחרים ולזרימת הדף. הערכים האפשריים כוללים:

• block - האלמנט מוצג בתור בלוק, תופס את כל רוחב הקונטיינר ויוצר שורות חדשות מעל ומתחת לו. דוגמה נפוצה היא תגית div.
• inline - האלמנט מוצג בתוך זרימת הטקסט, תופס את רוחב התוכן בלבד ואינו יוצר שורות חדשות. דוגמה נפוצה היא תגית span.
• inline-block - האלמנט מוצג כמו inline אך תומך בהגדרת גובה ורוחב כמו block. דוגמה נפוצה היא button.
• none - האלמנט מוסתר ולא תופס מקום בדף. הוא לא מוצג כלל ולא משפיע על זרימת הדף.
• flex - האלמנט מוצג כתצוגת גמישויות, ומאפשר ליצור פריסות גמישות יותר תוך שליטה על רכיבי תוכן בתוכה.
• grid - האלמנט מוצג כרשת, ומאפשר ליצור פריסות מורכבות של שורות ועמודות.
• list-item - האלמנט מוצג כתצוגת פריט ברשימה, וכולל חיווי כמו תו רישומי.

שימוש במאפיין display

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

דוגמה לשימוש ב-display

להלן דוגמה לשימוש במאפיין display:

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

באמצעות display ניתן ליצור פריסות מתקדמות ולשלוט בדיוק איך האלמנטים מוצגים ואיך הם משפיעים על התוכן והעיצוב של הדף.

    
          <div style="display: block; width: 100px; height: 50px; background-color: lightblue;">
            אלמנט עם display:block
          </div>
          <div style="display: inline; width: 100px; height: 50px; background-color: lightcoral;">
            אלמנט עם display:inline
          </div>