מתי להשתמש בשוליים לעומת ריפוד ב-CSS

'מיכל עם המחלקה' margin-div ' והחל את ' סִגְנוֹן 'תכונה כ' גבול: 1px שחור מלא '. לאחר מכן, הוסף קצת טקסט ב'

'תג:

< div מעמד = 'שוליים-דיב' סִגְנוֹן = 'border:1px שחור מלא' >
< ע >Linuxhint הוא אחד מאתרי ההדרכה הטובים ביותר.< br >
< / ע >
< div >

תְפוּקָה

כעת, החל את המאפיין 'margin' במחלקה '.margin-div':

.margin-div {
רקע כללי- צֶבַע : rgb ( 199 , 238 , 205 ) ;
גוֹפָן- גודל : בינוני;
גבול : 3px rgb ( 114 , 250 , 114 ) ;
שוליים: 100px 100px 100px 100px;
}

בקוד לעיל, ' .margin-div 'משמש לגישה לרכיב div כדי להחיל את המאפיינים המפורטים להלן:

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

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

כיצד להשתמש ב'ריפוד' ב-CSS?

על מנת להשתמש במאפיין 'ריפוד', נעשה שימוש בדוגמאות שצוינו לעיל. בשנייה ' div 'מיכל, השתמש בכיתה ' padding-div 'כדי להחיל ריפוד:

< div מעמד = 'לינוקס' >
< ע > Linuxhint הוא אחד מאתרי ההדרכה הטובים ביותר < / ע >
< / div >
< div מעמד = 'padding-div' סִגְנוֹן = 'border:1px שחור מלא' >
< ע >Linuxhint הוא אחד מאתרי ההדרכה הטובים ביותר.< br >
< / ע >
< / div >

תְפוּקָה

כדי להחיל ריפוד ומאפייני CSS אחרים על ' .padding-div ' בכיתה, תסתכל על הקוד שסופק:

.padding-div {
רקע כללי- צֶבַע : rgb ( 199 , 238 , 205 ) ;
גוֹפָן- גודל : בינוני;
ריפוד: 50px 50px 50px 50px;
}

בקוד הנ'ל, ניגשנו ל' השני ' div ' אלמנט באמצעות מחלקה ' .padding-div '. קבענו את 'צבע הרקע' ואת 'גודל הגופן'. יתר על כן, ה' ריפוד מאפיין ' משמש להוספת רווח סביב תוכן האלמנט מכל צד כ' 50 פיקסלים '.

תְפוּקָה

הסברנו את ההבדלים והשימושים של 'ריפוד' ו'שוליים' ב-CSS.

סיכום

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