ה ' שוליים למעלה ' מאפיין עוזר להרבה מפתחים ביצירת פריסות רספונסיביות ובמיקום רכיבי HTML. השימוש במאפיין 'השוליים העליון' מספק יותר שליטה על רכיבי HTML, מוסיף הפרדה ויזואלית ומסייע ביצירת עיצובים רספונסיביים טובים יותר. מדריך זה מדגים את המאפיין העליון של השוליים עם יישום מעשי ב-CSS.
- מהו נכס ה'שוליים העליון'?
- השתמש במאפיין 'השוליים העליון' עם ערך חיובי
- השתמש במאפיין 'השוליים העליון' עם ערך שלילי
מהו נכס ה'שוליים העליון'?
ה ' שוליים למעלה 'מאפיין משמש ליצירת רווח נוסף בין רכיבי HTML. ניתן להגדיר אותו עם ערכים חיוביים ושליליים כאחד. ערכים אלו נקבעים בהתאם לצרכי העיצוב ומסייעים במניעת חפיפה והתאמת המרווח בין רכיבי ה-HTML.
כיצד להשתמש בנכס 'מרווח העליון' עם ערך חיובי?
המאפיין 'שוליים-טופ' עם ערך חיובי מוסיף מרווח נוסף מהמיקום העליון לכיוון מרכז רכיב ה-HTML שנבחר. הערך שסופק יכול להיות בפיקסלים, באחוזים, ב-rem או בערכים גלובליים כמו אוטומטי, בירושה, לא מוגדר וכו'. הבה נעבור על דוגמה להבנה טובה יותר:
דוגמה: ניצול ערך חיובי
הבה נניח קובץ HTML שיוצר ' לאחר יצירת מבנה ה-HTML, החל מאפייני CSS על ' חִיוּבִי ' מעמד: בקטע הקוד שלמעלה: לאחר ביצוע קטע הקוד לעיל, דף האינטרנט נראה כך: ה-GIF שלמעלה ממחיש את ההשפעה של קביעת הערך של מאפיין השוליים העליון בדף האינטרנט. ה ' שוליים למעלה ” מאפיין עם ערך שלילי קבע מרווח נוסף מהמיקום העליון מול המרכז או לכיוון החלק החיצוני של הדף ביחס לרכיב ה-HTML שנבחר. הוא משמש בעיקר ליצירת אפקטים חופפים או במיקום של אלמנט ה-HTML. הבה נעבור דרך דוגמה להבנה טובה יותר. דוגמה: ניצול ערך שלילי הבה נניח קובץ HTML שיוצר ' התיאור של קטע הקוד שצוין לעיל מתואר להלן: לאחר ביצוע קטע הקוד לעיל, דף האינטרנט מופיע כך: ה-GIF שלמעלה מציג את ההשפעה המתרחשת על עיצוב דף האינטרנט על ידי הגדרת הערך השלילי עבור המאפיין של Margin-top. ה ' שוליים למעלה 'מאפיין משמש ליצירת רווח נוסף בין רכיבי HTML. ניתן להגדיר אותו עם ערכים חיוביים ושליליים כאחד. אם למאפיין 'השוליים העליון' מוקצה ערך חיובי, הרווח הנוסף יתווסף למרכז דף האינטרנט או אלמנט HTML שנבחר. במקרה של ערך 'שלילי' הרווח מתווסף אך לכיוון החלק החיצוני של הדף. מאמר זה מדגים מהו נכס מרווח ב-CSS.
< גוּף >
< div מעמד = 'חִיוּבִי' >
< ע > שוליים עליון עם ערך חיובי מוקצה ע >
div >
גוּף >
< סִגְנוֹן >
.חִיוּבִי {
רוחב: 300 פיקסלים;
גובה: 200 פיקסלים;
צבע רקע: ירוק יער;
גודל גופן: 20px;
צֶבַע: #fff;
שוליים-עליון: 50px;
}
סִגְנוֹן >
כיצד להשתמש בנכס 'השוליים העליון' עם ערך שלילי?
.שלילי {
צבע לבן;
יישור טקסט: מרכז;
צבע רקע: אָדוֹם ;
שוליים למעלה: -30 פיקסלים ;
ריפוד: 30px;
גובה: 100 פיקסלים;
}
סִגְנוֹן >
< גוּף >
< div מעמד = 'שלילי' >
הערך השלילי מוקצה ל נכס בעלות שוליים
div >
גוּף >
סיכום