Margin ו – padding הן 2 התכונות הנפוצות ביותר ב – CSS לריווח בין אלמנטים של HTML. התכונה margin מתייחסת לריווח מחוץ לאלמנט והתכונה padding מתייחסת לריווח בתוך האלמנט.
שנה את עיצוב הכותרת H2 בצורה הבאה :
- h2 {
- font-size: 1.5em;
- background-color: #ccc;
- margin: 1em;
- padding: 3em;
- }
בדוגמא הנ"ל, הכותרת מקבלת רווח של תו אחד מסביבה ורווח של 3 תווים בתוך הכותרת.
באפשרותך לקבוע את הריווח לכל צד של האלמנט באמצעות התכונות הבאות : margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom ו - padding-left.
מודל הקופסה ב- CSS
התכונות margin, padding ו – border (אשר מוצגת בעמוד הבא) מרכיבים ביחד את מודל הקופסה.
מודל הקופסה ב- CSS עובד כך שבאמצע יש את תוכן האלמנט ( למשל, טקסט ותמונה ) את תוכן האלמנט מקיפה התכונה padding לאחר מכן התכונה border ולבסוף התכונה margin. ניתן להציג את המודל ויזואלית בצורה הבאה :
אתה לא חייב להשתמש בכל המודל, אך זה בהחלט מועיל לזכור את המודל ולדעת כי ניתן להחיל אותו על כל אלמנט HTML בעמוד – זהו אחד הכלים המועילים ביותר ב – CSS !
עמודים רלוונטים
רפרנס
- התגית margin
- התגית padding