CSS মার্জিন

---

এই এলিমেন্টের মার্জিন 40px।

---

এলিমেন্টের চারপাশে, যেকোনো নির্ধারিত বর্ডারের বাইরে জায়গা তৈরি করতে CSS-এর margin প্রপার্টি ব্যবহার করা হয়।

CSS দিয়ে, মার্জিনের উপর আপনার সম্পূর্ণ নিয়ন্ত্রণ থাকে। একটি এলিমেন্টের প্রতিটি পাশের (উপর, ডান, নিচ, এবং বাম) মার্জিন সেট করার জন্য প্রপার্টি রয়েছে।

---

একটি এলিমেন্টের প্রতিটি পাশের মার্জিন নির্ধারণের জন্য CSS-এ প্রপার্টি রয়েছে:

• margin-top
• margin-right
• margin-bottom
• margin-left

সব margin প্রপার্টির নিচের মানগুলো থাকতে পারে:

• auto - ব্রাউজার মার্জিন হিসাব করে
• length - px, pt, cm ইত্যাদিতে একটি মার্জিন নির্ধারণ করে
• % - কন্টেইনিং এলিমেন্টের প্রস্থের শতাংশে একটি মার্জিন নির্ধারণ করে
• inherit - নির্ধারণ করে যে মার্জিন প্যারেন্ট এলিমেন্ট থেকে ইনহেরিট হবে

টিপস: ঋণাত্মক মান অনুমোদিত।

একটি <p> এলিমেন্টের চারটি পাশের জন্য ভিন্ন ভিন্ন মার্জিন সেট করুন:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

কোড ছোট করতে, একটি প্রপার্টিতে সব margin প্রপার্টি নির্ধারণ করা সম্ভব।

margin প্রপার্টি হলো নিচের পৃথক margin প্রপার্টিগুলোর একটি শর্টহ্যান্ড প্রপার্টি:

• margin-top
• margin-right
• margin-bottom
• margin-left

তো, এটি এভাবে কাজ করে:

margin প্রপার্টিতে চারটি মান থাকলে:

• margin: 25px 50px 75px 100px;
  • উপরের মার্জিন 25px
  • ডানের মার্জিন 50px
  • নিচের মার্জিন 75px
  • বামের মার্জিন 100px

চারটি মানসহ margin শর্টহ্যান্ড প্রপার্টি ব্যবহার করুন:

p {
  margin: 25px 50px 75px 100px;
}

margin প্রপার্টিতে তিনটি মান থাকলে:

• margin: 25px 50px 75px;
  • উপরের মার্জিন 25px
  • ডান ও বামের মার্জিন 50px
  • নিচের মার্জিন 75px

তিনটি মানসহ margin শর্টহ্যান্ড প্রপার্টি ব্যবহার করুন:

p {
  margin: 25px 50px 75px;
}

margin প্রপার্টিতে দুটি মান থাকলে:

• margin: 25px 50px;
  • উপর ও নিচের মার্জিন 25px
  • ডান ও বামের মার্জিন 50px

দুটি মানসহ margin শর্টহ্যান্ড প্রপার্টি ব্যবহার করুন:

p {
  margin: 25px 50px;
}

margin প্রপার্টিতে একটি মান থাকলে:

• margin: 25px;
  • চারটি মার্জিনই 25px

একটি মানসহ margin শর্টহ্যান্ড প্রপার্টি ব্যবহার করুন:

p {
  margin: 25px;
}

একটি এলিমেন্টকে তার কন্টেইনারের মধ্যে অনুভূমিকভাবে কেন্দ্রীভূত করতে আপনি margin প্রপার্টিকে auto-এ সেট করতে পারেন।

তখন এলিমেন্টটি নির্দিষ্ট প্রস্থ দখল করবে, এবং অবশিষ্ট জায়গা বাম ও ডান মার্জিনের মধ্যে সমানভাবে ভাগ হবে।

margin: auto ব্যবহার করুন:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

এই উদাহরণে <p class="ex1"> এলিমেন্টের বামের মার্জিন প্যারেন্ট এলিমেন্ট (<div>) থেকে ইনহেরিট হয়:

inherit মানের ব্যবহার:

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}

এলিমেন্টের উপরের ও নিচের মার্জিন কখনো কখনো একটি একক মার্জিনে কোলাপ্স হয়ে যায়, যা দুটি মার্জিনের মধ্যে যেটি বড় তার সমান।

এটি বামের ও ডানের মার্জিনে ঘটে না! শুধুমাত্র উপরের ও নিচের মার্জিনে!

নিচের উদাহরণটি দেখুন:

মার্জিন কোলাপ্সের একটি প্রদর্শনী:

h1 {
  margin: 0 0 50px 0;
}
h2 {
  margin: 20px 0 0 0;
}

উপরের উদাহরণে, <h1> এলিমেন্টের নিচের মার্জিন 50px এবং <h2> এলিমেন্টের উপরের মার্জিন 20px সেট করা আছে।

সাধারণ বুদ্ধিতে মনে হতে পারে যে <h1> এবং <h2>-এর মধ্যেকার উল্লম্ব মার্জিন মোট 70px (50px + 20px) হবে। কিন্তু মার্জিন কোলাপ্সের কারণে, প্রকৃত মার্জিন শেষ পর্যন্ত 50px হয়।

---