תגית: מודל התיבה

• ב-CSS יש בגדול 2 סוגי אלמנטים : inline / block
  • block – תופס כברירת מחדל את כל רוחב השורה
  • inline – תופס רק את הקטע המסויים שבתוך השורה, ולא פותח שורה חדשה.
    • לדוגמא p הוא block
• כל אלמנט בלוק מכיל:
  • תוכן  , שאת הגודל שלו קובעים עם height+width וברירת המחדל – רוחב מלא, גובה מלא
  • ריפוד padding – זה גבול פנימי בתוך האלמנט שבתוכו אין כלום ( כדי להבדיל את האלמנט, מאלמנטים אחרים בתוך המיכל).
  • גבול border  – מצויר מסביב לאלמנט – כלומר מגדיל אותו
  • שוליים  margin  –  זה קובע את הרווח בין האלמנט הזה, לאלמנטים אחרים.
    • כלומר שוליים של 0 גורמות לאלמנטים להיות צמודים אחד לשני.
    • בנוסף – לאלמנטים יש ברירות מחדל, והן לא תמיד אפס.
• כלומר בברירת המחדל – אלמנט לא תופס רק את הגודל של התוכן שלו, אלא יותר מזה, כי יש גם תוספות לריפוד, לגבול, ולשוליים שלו.
• כדי להקל על עצמנו, אפשר להגדיר את המאפיין

box-sizing: border-box;

זה גורם לגודל של הריפוד + הגבול – להיחשב בתוך האלמנט. (השוליים עדין נשארים מחוץ לאלמנט).

• כל אלמנט , יש לו הגדרה ברירת מחדל לגבי צורת התצוגה שלו, כלומר האם הוא נחשב block או inline
  • למשל בנוגע לאלמנט פיסקה p, ברירת המחדל היא שהוא block
  • אם רוצים לשנות זאת, עושים את זה באמצעות המאפיין display

display:inline;

• הסבר הערכים השונים :
  • display: inline – הדפדפן מתעלם מהרוחב מהגובה של האלמנט, ומסדר אותם כאילו הם טקסט בתוך שורה .
  • display:inline-block – הדפדפן מתייחס לאלמנט כאילו הוא בלוק , אבל בתוך שורה, כלומר הוא כן מתייחס לגובה ולרוחב, אבל בתוך שורה, ואם ישאר מקום לעוד אלמנטים – אז גם הם יכנסו בתוך השורה.
    צריך לזכור – שבמצב כזה, הדפדפן מתייחס גם לירידת שורה בתוך קוד ה-html. זאת אומרת שירידת שורה =שווה= רווח בתצוגה על המסך.
  • display:block – כלומר תתיחס כמו בלוק, שתופס שורה שלמה
• בנוגע להגדרות רוחב\גובה :
  • בפיקסלים – ברור לנו.
  • באחוזים – הכוונה אחוז מתוך המיכל שלו