' תג והגדר את ' צֶבַע 'לשחור:

<מרכז >
= '../book.jpg' גוֹבַה = 'חמישים%' ; רוֹחַב = 'חמישים%' >

= 'צבע רקע: כחול משתמט' >

= 'צבע שחור;' > ברוכים הבאים ל-Linuxhint >
>
>

לאחר קומפילציה של הקוד לעיל, הפלט נראה כך:

---

---

ה '

'תג נמצא בתחתית דף האינטרנט לפני החלת שוליים שליליים.

שימוש במאפיין העליון של שוליים שליליים

הוסף ' שוליים למעלה נכס ל'

' אלמנט ולתת את ערכו בשלילה. לדוגמה, כאן -15% הוא הערך של הנכס בראש השוליים:

<מרכז >
= '../book.jpg' גוֹבַה = 'חמישים%' ; רוֹחַב = 'חמישים%' >

= 'צבע רקע:כחול משתמט' >

= 'צבע: שחור; שוליים-עליון: -15%;' > ברוכים הבאים ל-Linuxhint >
>
>

לאחר ביצוע הקוד, דף האינטרנט נראה כך:

הפלט מראה שהשוליים העליונים השליליים גורם לאלמנט '

' להופיע לפני אלמנט האב.

שימוש במאפיין תחתון של שוליים שליליים

החל את אותם מאפיינים כמו לעיל ופשוט שנה את ' שוליים-תחתית ' תכונה. לאחר מכן, הוסף תמונה בתחתית האלמנט '

' כדי לראות שינויים חזותיים:

< div סִגְנוֹן = 'צבע רקע:כחול משתמט' >
< h3 סִגְנוֹן = 'צבע: שחור; שוליים-תחתונים: -5%;' > ברוכים הבאים ל-Linuxhint h3 >
div >
< img src = '../book.jpg' גוֹבַה = 'חמישים%' ; רוֹחַב = 'חמישים%' >

לאחר עדכון הקוד דף האינטרנט שלנו נראה כך:

הפלט לעיל מראה שהטקסט מקבל את השוליים התחתונים של -5%.

שימוש במאפיין זכות שוליים שליליים

על ידי מתן ערך של -55% של מאפיין ימין-שוליים לאלמנט

, הוא נע בכיוון ההפוך:

< div סִגְנוֹן = 'color-background:dodgerblue;' >
< h3 סִגְנוֹן = 'צבע: שחור; שוליים-שמאליים: -55%; ' > ברוכים הבאים ל-Linuxhint < / h3 >
< / div >
< img src = '../book.jpg' גוֹבַה = 'חמישים%' ; רוֹחַב = 'חמישים%' >

לאחר ביצוע פלט הקוד נראה כך:

הפלט מראה שהטקסט מקבל את השוליים השליליים-ימין.

שימוש במאפיין מרווח שלילי שמאלה

המאפיין Margin-left בעל ערך שלילי פועל באותו אופן. בקוד שלהלן, האלמנט '

' זז 50% לצד שמאל בכיוון ההפוך למאפיין margin-left:

= 'color-background:dodgerblue;' >

= 'צבע: שחור; שוליים-שמאליים: -50%;' > ברוכים הבאים ל-Linuxhint >
>
= '../book.jpg' גוֹבַה = 'חמישים%' ; רוֹחַב = 'חמישים%' >

הפלט של הקוד לעיל הוא:

כך פועל המרווח השלילי ב-CSS.

מדוע הוא margin-top:-5 != margin-bottom:5?

כאשר ' שוליים-תחתית: 5% ' בשימוש זה מוסיף שוליים מהצד התחתון לכיוון מרכז האלמנט אבל כאשר ' שוליים עליון:-5% ' בשימוש זה מוסיף מרווח של 5% מלמעלה אבל בכיוון ההפוך (מחוץ לדף).

סיכום

ב-CSS, השוליים השליליים פועלים בכיוון ההפוך על ידי הקצאת ערך השוליים. זה מזיז את תוכן האלמנט לכיוון החוץ/לחוץ של הדף. ה-'margin-top:-5' אינו שווה ל-'margin-bottom:5' מכיוון ששני ערכי המאפיינים מזיזים את התוכן לכיוונים מנוגדים המתאימים למיקום האב. מאמר זה הוכיח בהצלחה כיצד פועל המרווח השלילי.