بعد تحديث الكود ، تبدو صفحة الويب الخاصة بنا كما يلي:

يوضح الإخراج أعلاه أن النص يحصل على الهامش السفلي بنسبة -5٪.

استخدام خاصية حق الهامش السالب

بإعطاء قيمة -55٪ لخاصية margin-right لعنصر

، فإنه يتحرك في الاتجاه المعاكس:

< شعبة أسلوب = 'لون الخلفية: dodgerblue' >
< h3 أسلوب = 'اللون: أسود ؛ هامش اليسار: -55٪ ؛' > مرحبًا بك في Linuxhint < / h3 >
< / شعبة >
< IMG src = '../book.jpg' ارتفاع = 'خمسون٪' ؛ عرض = 'خمسون٪' >

بعد تنفيذ الكود ، يبدو الإخراج كما يلي:

يوضح الإخراج أن النص يحصل على الهامش السالب يمينًا.

استخدام خاصية ترك الهامش السالب

تعمل خاصية margin-left ذات القيمة السالبة بنفس الطريقة. في الكود أدناه ، يتحرك العنصر '

' بنسبة 50٪ إلى الجانب الأيسر في الاتجاه المعاكس لخاصية margin-left:

<أسلوب div = 'لون الخلفية: dodgerblue' >
<نمط h3 = 'اللون: أسود ؛ هامش اليسار: -50٪ ؛' > مرحبًا بك في Linuxhint >
>
= '../book.jpg' ارتفاع = 'خمسون٪' ؛ عرض = 'خمسون٪' >

إخراج الكود أعلاه هو:

هذه هي الطريقة التي يعمل بها الهامش السلبي في CSS.

لماذا يعتبر margin-top: -5! = margin-bottom: 5؟

عندما ' الهامش السفلي: 5٪ 'يتم استخدامه لإضافة هامش من الجانب السفلي باتجاه مركز العنصر ولكن عندما' الهامش العلوي: -5٪ 'يتم استخدامه لإضافة هامش 5٪ من الأعلى ولكن في الاتجاه المعاكس (خارج الصفحة).

خاتمة

في CSS ، يعمل الهامش السالب في الاتجاه المعاكس عن طريق تعيين قيمة الهامش. ينقل محتوى العنصر في الاتجاه الخارجي / خارج الصفحة. 'margin-top: -5 ″ لا يساوي' margin-bottom: 5 'لأن قيمتي الخاصية تنقل المحتوى في اتجاهين متعاكسين يتوافقان مع الموضع الأصلي. لقد نجحت هذه المقالة في توضيح كيفية عمل الهامش السالب.