कोड अपडेट करने के बाद हमारा वेबपेज इस तरह दिखता है:

उपरोक्त आउटपुट से पता चलता है कि टेक्स्ट को -5% का निचला मार्जिन मिल रहा है।

नेगेटिव मार्जिन राइट प्रॉपर्टी का उपयोग करना

तत्व को -55% मान मार्जिन-राइट प्रॉपर्टी देकर, यह विपरीत दिशा में चलता है:

< डिव शैली = 'पृष्ठभूमि-रंग: डोजरब्लू;' >
< h3 शैली = 'रंग: काला; मार्जिन-बायां: -55%; ' > लिनक्सहिंट में आपका स्वागत है < / h3 >
< / डिव >
< आईएमजी स्रोत = '../book.jpg' ऊंचाई = 'पचास%' ; चौड़ाई = 'पचास%' >

कोड के निष्पादन के बाद आउटपुट इस तरह दिखता है:

आउटपुट दिखाता है कि टेक्स्ट को नेगेटिव मार्जिन-राइट मिल रहा है।

नेगेटिव मार्जिन लेफ्ट प्रॉपर्टी का उपयोग करना

ऋणात्मक मान वाली मार्जिन-लेफ्ट प्रॉपर्टी उसी तरह काम करती है। नीचे दिए गए कोड में, “

” एलिमेंट मार्जिन-लेफ्ट प्रॉपर्टी के विपरीत दिशा में 50% लेफ्ट साइड मूव करता है:

<दिव्य शैली = 'पृष्ठभूमि-रंग: डोजरब्लू;' >

= 'रंग: काला; मार्जिन-बायां: -50%;' > लिनक्सहिंट में आपका स्वागत है >
>
= '../book.jpg' ऊंचाई = 'पचास%' ; चौड़ाई = 'पचास%' >

उपरोक्त कोड का आउटपुट है:

इसी तरह CSS में नेगेटिव मार्जिन काम करता है।

मार्जिन-टॉप क्यों है:-5!= मार्जिन-बॉटम:5?

जब ' मार्जिन-नीचे: 5% ” का उपयोग किया जाता है यह तत्व के केंद्र की ओर नीचे की ओर से एक मार्जिन जोड़ता है लेकिन जब ' मार्जिन-टॉप:-5% ” का उपयोग किया जाता है, यह शीर्ष से 5% का मार्जिन जोड़ता है लेकिन विपरीत दिशा में (पृष्ठ से बाहर)।

निष्कर्ष

सीएसएस में, ऋणात्मक मार्जिन मार्जिन मान निर्दिष्ट करके विपरीत दिशा में काम करता है। यह तत्व की सामग्री को बाहरी दिशा/पृष्ठ के बाहर ले जाता है। 'मार्जिन-टॉप: -5' 'मार्जिन-बॉटम: 5' के बराबर नहीं है क्योंकि दोनों गुण मान मूल स्थिति के अनुरूप सामग्री को विपरीत दिशाओं में ले जाते हैं। इस आलेख ने सफलतापूर्वक प्रदर्शित किया है कि नकारात्मक मार्जिन कैसे काम करता है।