এই নিবন্ধটি দেখায়:
- সিএসএস-এ নেতিবাচক মার্জিন কীভাবে কাজ করে?
- নেতিবাচক মার্জিন শীর্ষ সম্পত্তি ব্যবহার
- নেগেটিভ মার্জিন বটম প্রপার্টি ব্যবহার করা
- নেতিবাচক মার্জিন অধিকার সম্পত্তি ব্যবহার
- নেতিবাচক মার্জিন বাম সম্পত্তি ব্যবহার
- কেন মার্জিন-টপ: -5!= মার্জিন-নিচ: 5?
সিএসএস-এ নেতিবাচক মার্জিন কীভাবে কাজ করে?
নেতিবাচক মার্জিন বিষয়বস্তুকে পৃষ্ঠার বাইরে নিয়ে যায়। একটি ঋণাত্মক মার্জিন ব্যবহার করার পদ্ধতিটি ধনাত্মক মার্জিনের মতোই, ব্যতীত '-' মানের সাথে ব্যবহার করা হয়। নেতিবাচক মার্জিনের নীচে উল্লিখিত বৈচিত্রগুলি অনুসরণ করুন:
বিদ্যমান HTML ফাইল উপরের কোড কম্পাইল করার পরে, আউটপুট এর মত দেখায়: দ্য ' ” ট্যাগটি নেতিবাচক মার্জিন প্রয়োগ করার আগে ওয়েবপৃষ্ঠার নীচে থাকে৷ যোগ করুন ' মার্জিন-শীর্ষ 'সম্পত্তি' ” উপাদান এবং ঋণাত্মক এর মান দিন। উদাহরণস্বরূপ, এখানে -15% হল মার্জিন-শীর্ষ সম্পত্তির মান: কোডটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি দেখতে এইরকম: আউটপুট দেখায় যে নেতিবাচক মার্জিন-টপ প্যারেন্ট এলিমেন্টের সামনে “ উপরের মতো একই বৈশিষ্ট্যগুলি প্রয়োগ করুন এবং কেবল পরিবর্তন করুন ' মার্জিন-নিচ 'সম্পত্তি। এর পরে, চাক্ষুষ পরিবর্তনগুলি দেখতে “ কোড আপডেট করার পরে আমাদের ওয়েবপৃষ্ঠাটি এইরকম দেখায়: উপরের আউটপুটটি দেখায় যে পাঠ্যটি -5% এর নীচে মার্জিন পাচ্ছে। কোড আউটপুট চালানোর পরে এই মত চেহারা: আউটপুট দেখায় যে পাঠ্য নেতিবাচক মার্জিন-ডান পাচ্ছে। একটি ঋণাত্মক মান সহ মার্জিন-বাম সম্পত্তি একই ভাবে কাজ করে। নীচের কোডে, ' উপরের কোডের আউটপুট হল: এইভাবে সিএসএস-এ নেতিবাচক মার্জিন কাজ করে। যখন ' মার্জিন-নিচ: 5% ” ব্যবহার করা হয় এটি উপাদানটির কেন্দ্রের দিকে নীচের দিক থেকে একটি মার্জিন যোগ করে কিন্তু যখন “ মার্জিন-টপ:-5% ” ব্যবহার করা হয় এটি উপরে থেকে 5% এর মার্জিন যোগ করে কিন্তু বিপরীত দিকে (পৃষ্ঠার বাইরে)। CSS-এ, নেতিবাচক মার্জিন মার্জিন মান নির্ধারণ করে বিপরীত দিকে কাজ করে। এটি উপাদানটির বিষয়বস্তুকে পৃষ্ঠার বাইরের দিকে/বাইরে নিয়ে যায়। 'মার্জিন-টপ:-5″ 'মার্জিন-বটম:5' এর সমান নয় কারণ উভয় সম্পত্তি মানই মূল অবস্থানের সাথে সম্পর্কিত বিষয়বস্তুকে বিপরীত দিকে নিয়ে যায়। এই নিবন্ধটি সফলভাবে প্রদর্শন করেছে কিভাবে নেতিবাচক মার্জিন কাজ করে।
দ্য ' book.jpg স্থানীয় ডিরেক্টরিতে সংরক্ষিত একটি চিত্র হল এর পাথ হিসাবে প্রদান করা হয় ' src 'মান। দ্য ' প্রস্থ ' এবং ' উচ্চতা ” ছবির 50% সেট করা হয়েছে। এখন একটি তৈরি করুন '
<কেন্দ্র >
= '../book.jpg' উচ্চতা = 'পঞ্চাশ%' ; প্রস্থ = 'পঞ্চাশ%' >
= 'রঙ কালো;' > Linuxhint >
>
>
নেতিবাচক মার্জিন শীর্ষ সম্পত্তি ব্যবহার
<কেন্দ্র >
= '../book.jpg' উচ্চতা = 'পঞ্চাশ%' ; প্রস্থ = 'পঞ্চাশ%' >
= 'রঙ: কালো; মার্জিন-টপ: -15%;' > Linuxhint >
>
>
” এলিমেন্ট প্রদর্শন করে।
নেগেটিভ মার্জিন বটম প্রপার্টি ব্যবহার করা
< h3 শৈলী = 'রঙ: কালো; মার্জিন-নিচ: -5%;' > Linuxhint-এ স্বাগতম h3 >
div >
< img src = '../book.jpg' উচ্চতা = 'পঞ্চাশ%' ; প্রস্থ = 'পঞ্চাশ%' >
নেতিবাচক মার্জিন অধিকার সম্পত্তি ব্যবহার
উপাদানে মার্জিন-রাইট সম্পত্তির -55% মান প্রদান করে, এটি বিপরীত দিকে চলে যায়:
< div শৈলী = 'পটভূমির রঙ: ডজারব্লু;' >
< h3 শৈলী = 'রঙ: কালো; মার্জিন-বাম: -55%;' > Linuxhint-এ স্বাগতম < / h3 >
< / div >
< img src = '../book.jpg' উচ্চতা = 'পঞ্চাশ%' ; প্রস্থ = 'পঞ্চাশ%' >
নেতিবাচক মার্জিন বাম সম্পত্তি ব্যবহার
' উপাদানটি মার্জিন-বাম সম্পত্তির বিপরীত দিকে বাম দিকে 50% সরে যায়:
= 'রঙ: কালো; মার্জিন-বাম: -50%;' > Linuxhint >
>
= '../book.jpg' উচ্চতা = 'পঞ্চাশ%' ; প্রস্থ = 'পঞ্চাশ%' >
কেন মার্জিন-টপ:-5!= মার্জিন-নিচ:5?
উপসংহার