ריפוד CSS הוא אחד המאפיינים של דגם תיבת CSS. מאפיין קצר זה מגדיר את הריפוד סביב ארבעת הצדדים של אלמנט HTML. ניתן להחיל ריפוד CSS כמעט על כל אחד תג HTML (למעט חלק מתגי הטבלה). בנוסף, לכל ארבעת הצדדים של האלמנט יכול להיות ערך שונה.
נכס ריפוד CSS
כדי להשתמש במאפיין הריפוד הקצר של CSS, אתה יכול להשתמש ב- "TRouBLe" (או "TRiBbLe" הממונמן בשבילך אוהדי מסע בין כוכבים). זה מייצג חלק עליון, ימין, תַחתִית, ו שמאלה, וזה מתייחס לסדר רוחבי הריפוד שקבעת במאפיין הקצר. לדוגמה:
ריפוד: למעלה מימין למטה משמאל;
ריפוד: 1px 2px 3px 6px;
אם השתמשת בערכים המפורטים לעיל, הוא יחיל ערך ריפוד שונה על כל צד של רכיב ה- HTML שעליו אתה מחיל אותו. אם אתה רוצה להחיל את אותה ריפוד על כל ארבעת הצדדים, אתה יכול לפשט את CSS ופשוט כתוב ערך אחד:
ריפוד: 12 פיקסלים;
בשורה זו של CSS, 12 פיקסלים של ריפוד יחולו על כל 4 צדי האלמנט.
אם אתה רוצה שהריפוד יהיה זהה עבור החלק העליון והתחתון והשמאל והימני, אתה יכול לכתוב שני ערכים:
ריפוד: 24 פיקסלים 48 פיקסלים;
הערך הראשון (24 פיקסלים) יחול על החלק העליון והתחתון, ואילו השני יחול על שמאל וימין.
אם אתה כותב שלושה ערכים, זה יהפוך את הריפוד האופקי (שמאל וימין) זהה, תוך שינוי החלק העליון והתחתון:
ריפוד: תחתון ימני ושמאל למעלה;
ריפוד: 0px 1px 3px;
על פי מודל התיבה CSS, ריפוד הוא הקרוב ביותר לאלמנט / התוכן עצמו. משמעות הדבר היא כי ריפוד מתווסף לאלמנט בין רוחב התוכן או גובהו לבין כל ערכי הגבול שבהם אתה משתמש. אם הריפוד מוגדר לאפס, יש לו קצה זהה לתוכן.
ערכי ריפוד של CSS
ריפוד CSS יכול לקחת כל ערך אורך שאינו שלילי. הקפד לציין את המדידה, כגון px או em. תוכל גם לציין אחוז לריפוד שלך, שיהיה אחוז מרוחב גוש המכיל של האלמנט. זה כולל ריפוד עליון ותחתון. לדוגמה:
#container {רוחב: 800 פיקסלים; גובה: 200 פיקסלים; }
#container p {רוחב: 400 פיקסלים; גובה: 75%; ריפוד: 25% 0; }
ה גוֹבַה של הפסקה בתוך #מְכוֹלָה האלמנט יהיה 75% מה- #מְכוֹלָהגובה בתוספת 25% מהרוחב לריפוד העליון ו -25% מהרוחב לריפוד התחתון. סך הכל 300 + 200 + 200 = 700 פיקסלים.
השפעות הוספת ריפוד CSS
עַל אלמנטים ברמת הבלוק, הריפוד מוחל על ארבעת הצדדים. מכיוון שהאלמנט הוא כבר בלוק או תיבה, הריפוד מוחל על דפנות התיבה.
כאשר מתווסף ריפוד CSS ל אלמנטים מוטבעים, ייתכן שיש חפיפה כלשהי של אלמנטים מעל ומתחת לאלמנט המוטבע אם הריפוד האנכי עולה על גובה הקו, אך הוא לא ידחוף את גובה הקו כלפי מטה. ריפוד אופקי CSS המופעל על אלמנטים מוטבעים יתווסף לתחילת האלמנט ולסוף האלמנט. והריפוד עשוי לעטוף קווים. אך הוא לא יחול על כל השורות של אלמנט רב-שורות, ולכן אינך יכול להשתמש בריפוד בכדי להכניס קטע של תוכן מוטבע רב-שורות.
כמו כן, ב- CSS2.1, אינך יכול ליצור גושי מיכל כאשר הרוחב תלוי באלמנט עם אחוזים לרוחבים (או לרוחבי ריפוד). אם תעשה התוצאה לא מוגדרת. הדפדפנים עדיין יציגו את התוכן, אך ייתכן שלא תקבל את התוצאות שאתה מצפה לה. אם אתה חושב על זה, זה הגיוני, כאילו אלמנט המכולה שלך צריך לדעת את רוחב האלמנטים הבתיים שלו כדי להגדיר את רוחבו - כגון כאשר אין לו רוחב שהוגדר מראש, ולאחד או יותר מוגדר רוחב כאחוז מאלמנט המיכל, זה מגדיר שרשרת עגולה ללא תשובה. אם אתה משתמש באחוזים לרוחב של כל דבר במסמך שלך, עליך לוודא שמוגדרים גם רוחבי אלמנט האב.