X

X

X

CSS এ মার্জিনের ব্যবহার


এই ইলামেন্টের 70px মার্জিন সেট করা আছে।

নিজে নিজে চেষ্টা করুন »


CSS Margins

CSS margin property দিয়ে ইলামেন্টের চারপাশে স্পেস বা ফাঁকা জায়গা তৈরি করা হয়। যেটি দিয়ে অন্যান্য ইলামেন্টের সাথে এর একটি দূরত্ব সৃষ্টি করা হয়। এটি দিয়ে মূলত বর্ডারের বাইরের ফাঁকা জায়গাকে নির্দেশ করা হয়।

সিএসএস ব্যবহার করে ইচ্ছেমত কোনো ইলামেন্টের মার্জিন সেট করা যায়। ডান, বাম, উপর , নিচ চারদিকেই সঠিকভাবে মার্জিন সেট করা যায়।


পৃথকভাবে চারপাশে মার্জিন সেট করার নিয়ম

CSS এ কোনো ইলামেন্টের চারপাশে মার্জিন সেট করার জন্য নিম্নোক্ত প্রপার্টিগুলো ব্যবহার করা হয়:

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

সব মার্জিন প্রপার্টির নিম্নোক্ত মানগুলো রয়েছে:

  • auto – ব্রাউজারে স্বয়ংক্রিয়ভাবে মার্জিন সেট হয়।
  • length – in px, pt, cm ইত্যাদি বিভিন্ন এককে মার্জিন সেট করা হয়।
  • % – প্যারেন্ট বা ধারক ইলামেন্টের সাপেক্ষে শতকরা হারে ইলামেন্টের মার্জিন সেট করা হয়।
  • inherit – প্যারেন্ট বা ধারক ইলামেন্টের মার্জিনের অনুরূপ মার্জিন সেট করার জন্য এটি ব্যবহৃত হয়।

লক্ষ্যণীয়: ঋণাত্মক মান গ্রহণযোগ্য। অর্থাৎ, আপনি ঋণাত্মক মানও মার্জিন সেট করার জন্য ব্যবহার করতে পারবেন।

নিচের উদাহরণে <p> element এর চারপাশে মার্জিন সেট করার পদ্ধতি বর্ণনা করা হলো।

Code Example

<style>
div {
    border: 1px solid black;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
    background-color: lightblue;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Margin – শর্টহ্যান্ড প্রপার্টি

সংক্ষেপে ইলামেন্টের মার্জিন সেট করার জন্য শুধুমাত্র margin property ব্যবহার করলেই হবে।

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

Code Example

<style>
div {
    border: 1px solid black;
    margin: 100px 150px 100px 80px;
    background-color: lightblue;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচে দেখুন এটি কিভাবে কাজ করে:

যদি মার্জিন প্রপার্টির চারটি মান থাকে, যেমন- 

  • margin: 25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px

যদি মার্জিন প্রপার্টির তিনটি মান থাকে, যেমন- 

  • margin: 25px 50px 75px;
    • top margin হলো 25px
    • right এবং left margins হলো 50px
    • bottom margin হলো 75px

যদি মার্জিন প্রপার্টির দুটি মান থাকে, যেমন- 

  • margin: 25px 50px;
    • top এবং bottom margins হলো 25px
    • right এবং left margins হলো 50px

যদি মার্জিন প্রপার্টির একটি মান থাকে, যেমন- 

  • margin: 25px;
    • তাহলে চারপাশের মার্জিনের মান হবে 25px

auto Value

স্বয়ংক্রিয়ভাবে ধারক বা প্যারেন্ট ইলামেন্টের সাপেক্ষে কোনো ইলামেন্টের মান সেট করার জন্য auto মান ব্যবহার করা হয়। ইলামেন্টটি একটি নির্দিষ্ট প্রস্থ বিশিষ্ট হবে, এবং চারপাশে সমান মান বিশিষ্ট মার্জিন থাকবে। এরফলে ইলামেন্টটি আনুভূমিকভাবে মাঝখানে উপস্থাপিত হবে।

Code Example

<style>
div {
    width:300px;
    margin: auto;
    border: 1px solid red;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


inherit Value (ধারক বা প্যারেন্ট ইলামেন্টের অনুরূপ মার্জিন)

নিচের উদাহরণে বাম পাশের মার্জিনের মান ধারক বা প্যারেন্ট ইলামেন্টের অনুরূপ হবে।

Code Example

<style>
div {
    border: 1px solid red;
    margin-left: 100px;
}

p.ex1 {
    margin-left: inherit;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Margin সংকোচন

উপর এবং নিচের মার্জিন মাঝে মাঝে একটি মান দ্বারা সেট করা হয় এবং অন্যান্য মার্জিনের মান শূন্য বা সংকোচিত করা হয় নিচের উপায়ে।

Code Example

<style>
h1 {
    margin: 0 0 50px 0;
}

h2 {
    margin: 20px 0 0 0;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের উদাহরণে <h1> element এর নিচের মার্জিনের মান 50px । <h2> element এর উপরের মার্জিনের মান 20px ।

সাধারণ জ্ঞান দ্বারা বুঝা যায়, <h1> এবং the <h2> এর লম্বিক মার্জিনের মান হবে 70px(50px+20px) কিন্তু মার্জিন সংকোচনের কারণে এর মান হবে 50px ।


CSS Margin Property সমূহের তালিকা

Property বর্ণনা
margin একটি ডেক্লারেশন দিয়ে সব মার্জিন প্রপার্টি সেট করার জন্য ব্যবহৃত হয়।
margin-bottom কোনো ইলামেন্টের নিচের মার্জিনের মান সেট করার জন্য ব্যবহৃত হয়।
margin-left কোনো ইলামেন্টের বামপাশের মার্জিনের মান সেট করার জন্য ব্যবহৃত হয়।
margin-right কোনো ইলামেন্টের ডানপাশের মার্জিনের মান সেট করার জন্য ব্যবহৃত হয়।
margin-top কোনো ইলামেন্টের উপরের মার্জিনের মান সেট করার জন্য ব্যবহৃত হয়।