CSS-এ মার্জিন-টপ প্রপার্টি কি?

Css E Marjina Tapa Praparti Ki



দ্য ' মার্জিন-শীর্ষ ” সম্পত্তি প্রতিক্রিয়াশীল লেআউট তৈরি করতে এবং এইচটিএমএল উপাদানগুলির অবস্থান নির্ধারণে বিকাশকারীদের অনেক সাহায্য করে। 'মার্জিন-টপ' প্রপার্টির ব্যবহার এইচটিএমএল উপাদানের উপর আরো নিয়ন্ত্রণ প্রদান করে, ভিজ্যুয়াল সেপারেশন যোগ করে এবং আরও ভালো প্রতিক্রিয়াশীল ডিজাইন তৈরি করতে সাহায্য করে। এই নির্দেশিকাটি সিএসএস-এ ব্যবহারিক বাস্তবায়ন সহ মার্জিন-শীর্ষ সম্পত্তি প্রদর্শন করে।

'মার্জিন-টপ' সম্পত্তি কি?

দ্য ' মার্জিন-শীর্ষ HTML উপাদানগুলির মধ্যে অতিরিক্ত স্থান তৈরি করার জন্য সম্পত্তি ব্যবহার করা হয়। এটি ইতিবাচক এবং নেতিবাচক উভয় মান দিয়ে সেট করা যেতে পারে। এই মানগুলি ডিজাইনের প্রয়োজন অনুসারে সেট করা হয় এবং ওভারল্যাপিং প্রতিরোধে এবং HTML উপাদানগুলির মধ্যে ব্যবধান সামঞ্জস্য করতে সহায়তা করে।





একটি ইতিবাচক মান সহ 'মার্জিন-টপ' সম্পত্তি কীভাবে ব্যবহার করবেন?

একটি ইতিবাচক মান সহ 'মার্জিন-টপ' বৈশিষ্ট্যটি উপরের অবস্থান থেকে নির্বাচিত HTML উপাদানের কেন্দ্রের দিকে অতিরিক্ত ব্যবধান যোগ করে। প্রদত্ত মানটি পিক্সেল, শতাংশ, রেম বা স্বয়ংক্রিয়, ইনহেরিট, আনসেট ইত্যাদির মতো বিশ্বব্যাপী মানগুলিতে হতে পারে৷ আরও ভালভাবে বোঝার জন্য আসুন একটি উদাহরণ দিয়ে চলুন:



উদাহরণ: ইতিবাচক মূল্যের ব্যবহার



আসুন একটি HTML ফাইল ধরে নিই যা একটি '

” ট্যাগ করে এবং ডামি ডেটা প্রদান করে। এরপরে, বরাদ্দ করুন ' ইতিবাচক 'div' উপাদানের ক্লাসের মান:





< শরীর >
< div ক্লাস = 'ইতিবাচক' >
< পি > একটি ইতিবাচক মান সহ মার্জিন শীর্ষ বরাদ্দ করা হয়েছে৷ পি >
div >
শরীর >

এইচটিএমএল স্ট্রাকচার তৈরি করার পরে, সিএসএস বৈশিষ্ট্যগুলি প্রয়োগ করুন “ ইতিবাচক 'শ্রেণী:



< শৈলী >
ইতিবাচক {
প্রস্থ: 300px;
উচ্চতা: 200px;
পটভূমির রঙ: বন সবুজ;
ফন্ট-আকার: 20px;
রঙ: #fff;
মার্জিন-টপ: 50px;
}
শৈলী >

উপরের কোড স্নিপেটে:

  • প্রথমে, “এর মান সেট করুন 300px ' এবং ' 200px 'সিএসএসে' প্রস্থ ' এবং ' উচ্চতা ” বৈশিষ্ট্য, যথাক্রমে।
  • পরবর্তী, ' পেছনের রং ', ' অক্ষরের আকার ', এবং ' রঙ ' CSS বৈশিষ্ট্যগুলি ভাল ভিজ্যুয়ালাইজেশন উদ্দেশ্যে ব্যবহার করা হয়।
  • শেষ পর্যন্ত, '50px' মান 'কে প্রদান করা হয় মার্জিন-শীর্ষ ” অতিরিক্ত স্থান যোগ করার জন্য সম্পত্তি।

উপরের কোড স্নিপেটটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম দেখায়:

উপরের জিআইএফটি ওয়েবপেজে মার্জিন-শীর্ষ সম্পত্তির মান সেট করার প্রভাবকে চিত্রিত করে।

একটি নেতিবাচক মান সহ 'মার্জিন-টপ' সম্পত্তি কীভাবে ব্যবহার করবেন?

দ্য ' মার্জিন-শীর্ষ ” নেতিবাচক মান সহ বৈশিষ্ট্য কেন্দ্রের বিপরীতে বা পৃষ্ঠার বাইরের দিকে নির্বাচিত HTML উপাদানের সাথে সম্পর্কিত শীর্ষ অবস্থান থেকে অতিরিক্ত ব্যবধান সেট করে। এটি বেশিরভাগই ওভারল্যাপিং প্রভাব তৈরি করতে বা HTML উপাদানের অবস্থানের জন্য ব্যবহার করা হয়।

আসুন আরও ভালভাবে বোঝার জন্য একটি উদাহরণ দিয়ে হেঁটে যাই।

উদাহরণ: নেতিবাচক মূল্যের ব্যবহার

আসুন একটি HTML ফাইল ধরে নিই যা একটি '

” ট্যাগ করে এবং ডামি ডেটা প্রদান করে। এরপরে, বরাদ্দ করুন ' নেতিবাচক 'div' উপাদানের ক্লাসের মান:

< শৈলী >
.নেতিবাচক {
সাদা রং;
টেক্সট-সারিবদ্ধ: কেন্দ্র;
পেছনের রং: লাল ;
মার্জিন-শীর্ষ: -30px ;
প্যাডিং: 30px;
উচ্চতা: 100px;
}
শৈলী >
< শরীর >
< div ক্লাস = 'নেতিবাচক' >
নেতিবাচক মান বরাদ্দ করা হয় জন্য মার্জিন-শীর্ষ সম্পত্তি
div >
শরীর >

উপরে বর্ণিত কোড স্নিপেটের বিবরণ নীচে বর্ণিত হয়েছে:

  • প্রথমত, ' নেতিবাচক ' ক্লাস সিলেক্ট করা হয়েছে ' <স্টাইল> CSS স্টাইলিং প্রয়োগ করতে ট্যাগ করুন।
  • এরপর, “এর মান সেট করুন 220px ' এবং ' লাল 'সিএসএসে' প্রস্থ ' এবং ' পেছনের রং ” উন্নত ভিজ্যুয়ালাইজেশন পার্থক্য তৈরির জন্য বৈশিষ্ট্য।
  • তারপর, 'এর মান সেট করুন -30px 'সিএসএসে' মার্জিন-শীর্ষ 'সম্পত্তি।
  • এর পরে, একটি তৈরি করুন '
    ' ট্যাগ করুন এবং এটিকে ' এর একটি ক্লাস বরাদ্দ করুন নেতিবাচক ” এছাড়াও, div HTML উপাদানে ডামি ডেটা প্রদান করুন।

উপরের কোড স্নিপেটটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম প্রদর্শিত হবে:

উপরের জিআইএফ মার্জিন-শীর্ষ সম্পত্তির জন্য নেতিবাচক মান সেট করে ওয়েব পৃষ্ঠার ডিজাইনের উপর প্রভাব দেখায়।

উপসংহার

দ্য ' মার্জিন-শীর্ষ HTML উপাদানগুলির মধ্যে অতিরিক্ত স্থান তৈরি করার জন্য সম্পত্তি ব্যবহার করা হয়। এটি ইতিবাচক এবং নেতিবাচক উভয় মান দিয়ে সেট করা যেতে পারে। যদি 'মার্জিন-টপ' প্রপার্টি একটি ইতিবাচক মান দিয়ে বরাদ্দ করা হয়, তাহলে ওয়েবপৃষ্ঠার কেন্দ্রে বা নির্বাচিত HTML উপাদানের দিকে অতিরিক্ত স্থান যোগ করা হয়। একটি 'নেতিবাচক' মানের ক্ষেত্রে স্থান যোগ করা হয় কিন্তু পৃষ্ঠার বাইরের দিকে। এই নিবন্ধটি সিএসএস-এ মার্জিন-শীর্ষ সম্পত্তি কী তা প্রদর্শন করে।