📦 Box Model (מודל הקופסה)
כל אובייקט (אלמנט) ב־HTML מורכב מארבע שכבות עיקריות:
- Content – התוכן עצמו (טקסט/תמונה/רכיבים).
- Padding – מרווח פנימי סביב התוכן.
- Border – הגבול שמקיף את ה־Padding (ברירת מחדל: לא נראה, אבל אפשר להציג).
- Margin – מרווח חיצוני מחוץ לגבול – מפריד מהאלמנטים שמסביב.
התמונה מציגה קופסה מקוננת: Content בתוך Padding, בתוך Border, עם Margin מסביבה.
דוגמת h1 עם מרווחים וגבול
בדוגמה הבאה הוספנו:
border– כדי לראות את ההפרדה בין ה־Padding ל־Margin.padding-right– מרווח פנימי מימין.margin-top– מרווח חיצוני מלמעלה.
h1.demo-title {
border: 2px solid #22d3ee; /* cyan-400 */
padding-right: 16px; /* גבול פנימי ימני */
margin-top: 24px; /* גבול חיצוני עליון */
}
אלמנטים מדומים (::before / ::after)
אלמנטים מדומים מאפשרים להוסיף תוכן דקורטיבי או עזר מבלי לשנות את ה־HTML. לדוגמה, אפשר להוסיף קווים סביב כותרת, או אייקון לפני טקסט.
.title-lines {
position: relative;
padding: 0.5rem 1rem;
}
.title-lines::before,
.title-lines::after {
content: "";
position: absolute;
top: 50%;
width: 28%;
height: 2px;
background: currentColor;
opacity: .5;
transform: translateY(-50%);
}
.title-lines::before { right: 100%; margin-right: 8px; }
.title-lines::after { left: 100%; margin-left: 8px; }
.note::before {
content: "📝 ";
}
קיצורי דרך לבחירת אלמנטים של הורה/ילד
✅ טיפ: אם ברצונך לכלול את border בתוך חישוב הרוחב/גובה, השתמש ב־box-sizing: border-box;. זה מקל על עימוד ומונע הפתעות ברספונסיביות.