'குறிச்சொல்லி அதன்' அமைக்கவும் நிறம் ”கருப்புக்கு:

<மையம் >
= '../book.jpg' உயரம் = 'ஐம்பது%' ; அகலம் = 'ஐம்பது%' >

= 'பின்னணி நிறம்: டாட்ஜர் ப்ளூ' >

= 'நிறம்: கருப்பு;' > Linuxhint >
>
>

மேலே உள்ள குறியீட்டைத் தொகுத்த பிறகு, வெளியீடு இதுபோல் தெரிகிறது:

---

---

'

நெகட்டிவ் மார்ஜினைப் பயன்படுத்துவதற்கு முன், வலைப்பக்கத்தின் கீழே 'குறிச்சொல் இருக்கும்.

எதிர்மறை மார்ஜின் மேல் சொத்தைப் பயன்படுத்துதல்

கூட்டு ' விளிம்பு மேல் 'சொத்துக்கு'

'உறுப்பு மற்றும் அதன் மதிப்பை எதிர்மறையாகக் கொடுங்கள். உதாரணமாக, இங்கே -15% என்பது மார்ஜின்-டாப் சொத்தின் மதிப்பு:

<மையம் >
= '../book.jpg' உயரம் = 'ஐம்பது%' ; அகலம் = 'ஐம்பது%' >

= 'பின்னணி நிறம்:டாட்ஜர் ப்ளூ' >

= 'நிறம்: கருப்பு; விளிம்பு-மேல்: -15%;' > Linuxhint >
>
>

குறியீட்டை இயக்கிய பிறகு, வலைப்பக்கம் இப்படி இருக்கும்:

எதிர்மறை மார்ஜின்-டாப் '

' உறுப்பை பெற்றோர் உறுப்பின் முன் காட்சிப்படுத்துகிறது என்பதை வெளியீடு காட்டுகிறது.

எதிர்மறை மார்ஜின் பாட்டம் சொத்தைப் பயன்படுத்துதல்

மேலே உள்ள அதே பண்புகளைப் பயன்படுத்தவும் '' விளிம்பு-கீழே ”சொத்து. அதன் பிறகு, காட்சி மாற்றங்களைக் காண “

” உறுப்பின் கீழே ஒரு படத்தைச் சேர்க்கவும்:

< div பாணி = 'பின்னணி நிறம்:டாட்ஜர் ப்ளூ' >
< h3 பாணி = 'நிறம்: கருப்பு; விளிம்பு-கீழ்: -5%;' > Linuxhint க்கு வரவேற்கிறோம் h3 >
div >
< img src = '../book.jpg' உயரம் = 'ஐம்பது%' ; அகலம் = 'ஐம்பது%' >

குறியீட்டைப் புதுப்பித்த பிறகு, எங்கள் வலைப்பக்கம் இப்படி இருக்கும்:

மேலே உள்ள வெளியீடு, உரையின் கீழ் விளிம்பு -5% பெறுகிறது என்பதைக் காட்டுகிறது.

எதிர்மறை மார்ஜின் ரைட் சொத்தைப் பயன்படுத்துதல்

உறுப்புக்கு விளிம்பு-வலது சொத்தின் -55% மதிப்பைக் கொடுப்பதன் மூலம், அது எதிர் திசையில் நகரும்:

< div பாணி = 'பின்னணி நிறம்:டாட்ஜர் ப்ளூ;' >
< h3 பாணி = 'நிறம்: கருப்பு; விளிம்பு-இடது: -55%; ' > Linuxhint க்கு வரவேற்கிறோம் < / h3 >
< / div >
< img src = '../book.jpg' உயரம் = 'ஐம்பது%' ; அகலம் = 'ஐம்பது%' >

குறியீடு வெளியீட்டை இயக்கிய பின் இப்படி இருக்கும்:

உரை எதிர்மறை விளிம்பு-வலைப் பெறுகிறது என்பதை வெளியீடு காட்டுகிறது.

எதிர்மறை விளிம்பு இடது சொத்தைப் பயன்படுத்துதல்

எதிர்மறை மதிப்பைக் கொண்ட விளிம்பு-இடது சொத்து அதே வழியில் செயல்படுகிறது. கீழே உள்ள குறியீட்டில், '

' உறுப்பு 50% இடது பக்கமாக, விளிம்பு-இடது சொத்துக்கு எதிர் திசையில் நகர்கிறது:

= 'பின்னணி நிறம்:டாட்ஜர் ப்ளூ;' >

= 'நிறம்: கருப்பு; விளிம்பு-இடது: -50%;' > Linuxhint >
>
= '../book.jpg' உயரம் = 'ஐம்பது%' ; அகலம் = 'ஐம்பது%' >

மேலே உள்ள குறியீட்டின் வெளியீடு:

CSS இல் எதிர்மறை விளிம்பு இப்படித்தான் செயல்படுகிறது.

விளிம்பு-மேல்:-5 != விளிம்பு-கீழ்:5 ஏன்?

எப்பொழுது ' விளிம்பு-கீழ்:5% 'பயன்படுத்தப்படுகிறது, இது கீழ்ப் பக்கத்திலிருந்து தனிமத்தின் மையத்தை நோக்கி ஒரு விளிம்பைச் சேர்க்கிறது ஆனால் எப்போது' விளிம்பு மேல்:-5% ” பயன்படுத்தப்படுகிறது, இது மேலே இருந்து 5% விளிம்பை சேர்க்கிறது ஆனால் எதிர் திசையில் (பக்கத்திற்கு வெளியே).

முடிவுரை

CSS இல், விளிம்பு மதிப்பை ஒதுக்குவதன் மூலம் எதிர்மறை விளிம்பு எதிர் திசையில் செயல்படுகிறது. இது உறுப்பின் உள்ளடக்கத்தை பக்கத்தின் வெளிப்புற திசையில்/வெளியே நகர்த்துகிறது. 'மார்ஜின்-டாப்:-5' என்பது 'மார்ஜின்-பாட்டம்:5'க்கு சமமாக இல்லை, ஏனெனில் இரண்டு சொத்து மதிப்புகளும் உள்ளடக்கத்தை பெற்றோர் நிலைக்கு ஒத்த எதிர் திசைகளில் நகர்த்துகின்றன. எதிர்மறை விளிம்பு எவ்வாறு செயல்படுகிறது என்பதை இந்தக் கட்டுரை வெற்றிகரமாக நிரூபித்துள்ளது.