ריפוד פנימי

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

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

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

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

padding-top: המרווח הפנימי בצד העליון של האלמנט.
padding-right: המרווח הפנימי בצד הימני של האלמנט.
padding-bottom: המרווח הפנימי בצד התחתון של האלמנט.

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

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

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

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

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

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

אתגר

קל

ניתן לך מסמך HTML עם שתי כותרות. עליך להשתמש במאפיין padding כדי להוסיף ריווח סביב התוכן של הרכיבים האלה. פעל לפי השלבים הבאים:

כתוב כלל CSS שמכוון לרכיב <h1>. הגדר את padding ל-20px בכל הצדדים.
כתוב כלל CSS שמכוון לרכיב <h2>. הגדר את ה-padding העליון והתחתון ל-10px ואת ה-padding השמאלי והימני ל-30px.

נסו בעצמכם

<html>
<head>
    <title>Padding</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">The Box Model</h1>
    <h2 style="border:2px solid black;">It helps in controlling spacing and layout in web design! </h2>
</body>
</html>