שוליים

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 35 מתוך 76.

ב-CSS, margin הוא המרווח סביב רכיב, מחוץ לגבולות שהוגדרו לו. זהו חלק חיוני נוסף במודל הקופסה. משתמשים בשוליים כדי ליצור מרווח בין רכיבים ולהפריד ביניהם.

אפשר לשלוט בשוליים בכל אחד מארבעת הצדדים של רכיב (עליון, ימני, תחתון ושמאלי) בנפרד או באמצעות תחביר מקוצר.

הנה התחביר הבסיסי לשימוש במאפיין margin:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

margin-top: השוליים בצד העליון של הרכיב.
margin-right: השוליים בצד הימני של הרכיב.
margin-bottom: השוליים בצד התחתון של הרכיב.

margin-left: השוליים בצד שמאל של הרכיב.
value: ערך השוליים הרצוי, שאפשר לציין בפיקסלים (px), ביחידות em (em), באחוזים (%) או ביחידות CSS תקינות אחרות.

אפשר גם להשתמש בסימון מקוצר כדי להגדיר את השוליים לכל ארבעת הצדדים בבת אחת, לדוגמה:

p {
    margin: 20px; /* מחיל את אותו שוליים על כל ארבעת הצדדים */
}

div {
    margin: 10px 25px; /* מגדיר את השוליים העליונים והתחתונים ל-10px, ואת השוליים השמאליים והימניים ל-25px */
}

.button {
    margin: 15px 30px 10px 5px;/* מגדיר את השוליים לכל צד בנפרד */
}

בדוגמה הזו, לכל רכיבי <p> יש שוליים של 20px בכל הצדדים, לכל רכיבי <div> יש שוליים עליונים ותחתונים של 10px ושוליים ימניים ושמאליים של 25px, ולכל הרכיבים עם המחלקה button יש שוליים עליונים של 15px, שוליים ימניים של 30px, שוליים תחתונים של 10px ושוליים שמאליים של 5px.

אתגר

קל

ניתן לך מסמך HTML עם כותרת (<h1>) ואלמנט חלוקה (<div>). המשימה שלך היא להשתמש במאפיין margin כדי להוסיף רווח סביב האלמנטים האלה. פעל לפי השלבים הבאים:

כתוב כלל CSS שפונה אל האלמנט <h1>. הגדר את margin ל־20px בכל הצדדים.
כתוב כלל CSS שפונה אל האלמנט <div>. הגדר את ה־margin העליון והתחתון ל־10px, ואת ה־margin השמאלי והימני ל־30px.

נסו בעצמכם

<html>
<head>
    <title>Margins</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">Mastering CSS Margins</h1>
    <div style="border:2px solid black;">Margins create space around elements.</div>
</body>
</html>