כיצד לנהל מרווחים וריפוד בעיצובים רספונסיביים

מדריך מעשי זה ימחיש את השיטה לניהול מרווחים וריפוד בעיצובים רספונסיביים.

איך לנהל מרווחים וריפוד בעיצובים רספונסיביים?

ניתן לנהל את הריפוד והמרווח בעיצובים רספונסיביים באמצעות CSS. הדגמה מעשית של ניהול המרווחים והריפוד מובאת להלן.

שלב 1: צור מבנה HTML

ראשית, צור מבנה HTML וקצת טקסט בתוכו באמצעות

ו

תגיות:

< גוּף >
< h2 > ריפוד וריווח CSS רספונסיבי < / h2 >
< div > לרכיב CSS זה יש ריפוד של 80 פיקסלים ומרווח של 40 פיקסלים. < / div >
< / גוּף >

שלב 2: החל CSS

---

---

כעת, בואו ניישם CSS על

תָג. ראשית, הגדר את ' ריפוד 'ערך הנכס ל' 80 פיקסלים ' כדי להפוך את החלל סביב האלמנט. לאחר מכן, הגדר את ' שולים 'ערך הנכס ל' 40 פיקסלים ' וליצור מרחב סביב אלמנטים מחוץ לגבול. לבסוף, השתמש ב' גבול ' מאפיין וציין את הגבול והצבע כדי ליצור גבול:

div {
ריפוד : 80 פיקסלים ;
שולים : 40 פיקסלים ;
גבול : 1 פיקסלים מוצק ירוק ;
}

הפלט שלמעלה מאשר שהחלה רווחים וריפוד.

בוא נבדוק אם הוא מגיב או לא על ידי כיווץ חלון הדפדפן:

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

סיכום

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