סקירה קצרה של CSS ריפוד

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

CSS ריפוד נכס

כדי להשתמש בקיצור קצר של ריפוד CSS, תוכל להשתמש ב- "TRoublee" (או "TRiBbLe") עבור מעריצי "מסע בין כוכבים"). זה מייצג למעלה , ימינה , תחתונה , שמאלה , והוא מתייחס לסדר של רוחב ריפוד אתה מגדיר את המאפיין קצרנות. לדוגמה:

ריפוד: למעלה מימין למטה משמאל; ריפוד: 1px 2px 3px 6px;

אם השתמשת בערכים המפורטים לעיל, היא תחיל ערך ריפוד שונה לכל צד של כל רכיב HTML שאתה מחיל אותו. אם ברצונך להחיל את אותו ריפוד על כל ארבעת הצדדים, תוכל לפשט את ה- CSS ולכתוב רק ערך אחד:

ריפוד: 12px;

עם שורה זו של CSS, 12 פיקסלים של ריפוד יחולו על כל 4 הצדדים של האלמנט.

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

ריפוד: 24px 48px;

הערך הראשון (24px) יחול על החלק העליון והתחתון, ואילו הערך השני יחול על ימין ועל שמאל.

אם אתה כותב שלושה ערכים, זה יהפוך את הריפוד האופקי (משמאל ומימין) אותו, תוך שינוי העליון והתחתון:

ריפוד: החלק העליון מימין ושמאל התחתונה; ריפוד: 0px 1px 3px;

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

CSS ערכי ריפוד

ריפוד CSS יכול לקחת כל ערך אורך לא שלילי. הקפד לציין את המדידה, כגון px או em. ניתן גם לציין אחוז לריפוד שלך, אשר יהיה אחוז מהרוחב של גוש המכיל רכיב. זה כולל ריפוד עליון ותחתון. לדוגמה:

#container {width: 800px; גובה: 200px; } #container p {width: 400px; גובה: 75%; ריפוד: 25% 0; }

גובה הפיסקה בתוך האלמנט #container יהיה 75% מהגובה של #container בתוספת 25% מהרוחב לריפוד העליון ו -25% מהרוחב לריפוד התחתון. זה מסתכם 300 + 200 + 200 = 700px.

אפקטים של הוספת ריפוד CSS

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

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

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