Margin CSS

নিচের কোডটি লক্ষ্য করুন,

<body>
  <div id="margin">
  </div>
</body>

উপরের কোডটিতে body ট্যাগ এর ভিতরে একটি div আছে। এখানে, body কে বলা হয় parent element আর div কে বলা হয় child element. অর্থাৎ বাহিরের element কে parent element এবং ভেতরের element কে child element বলে। এখন আমি যদি চাই একটি child element তার parent element এর top, right,bottom,left থেকে কিছু জায়গা ছেড়ে দিতে হবে, তাহলে margin ব্যবহার করতে হবে। নিচের চিত্রটি লক্ষ্য করুন,

margin

উপরের চিত্রে দেখানো হয়েছে, div id=”margin” চাইল্ড ইলিমেন্টটি body  এর top থেকে 20 px, right থেকে 20 px, bottom থেকে 30 px এবং left থেকে 25 px ছেড়ে দিয়েছি। এখন উপরের চিত্রের মত একটি div তৈরি করতে নিচের css লিখতে হবেঃ

#margin{
 margin-top:20px;
 margin-right:20px;
 margin-bottom:30px;
 margin-left:25px; 
}

একলাইনের মাধ্যমেও আপনি উপরের css টি লিখতে পারেনঃ

#margin{
   margin: 20px 20px 30px 25px;
}

তবে এক্ষেত্রে, margin এর মানগুলো top, right,bottom,left এই সিকুয়েন্সে দিতে হবে। অর্থাৎ, top হতে শুরু হবে এবং ক্লোক-ওয়াইজ (ঘরির কাটার দিকে) চলবে। নিচের সম্পূর্ন কোডটি দেখুনঃ

ফলাফল

এখানে, অতিরিক্ত আরেকটি css করা হয়েছেঃ background:green; যেন margin টা চোখে পড়ে। আরও একটা ব্যাপার বলে রাখি, 20px কে 20 px লিখলে ভুল হবে, অর্থাৎ মান এবং px এর মাঝে কোন স্পেস থাকতে পারবে না।

এখন মনে করেন, আপনি top, right,bottom,left সবগুলোতে 50px margin সেট করতে চান তাহলে নিচের মত লিখলেই হবেঃ

#margin{
  margin:50px;
}

তবে নিচের মত লিখলেও কাজ করবেঃ

#margin{
  margin-top:50px;
  margin-right:50px;
  margin-bottom:50px;
  margin-left:50px;
}

আবার আপনি যদি নিচের মত লিখেনঃ

#margin{
  margin:50px 20px;
}

তাহলে বুঝাবে top এবং bottom এ 50px আর left এবং right এ 20px. অর্থাৎ, যদি আপনি margin এর দুইটি মান লিখেন তাহলে প্রথম মানটি top এবং bottom এর margin এবং দ্বিতীয় মানটি left এবং right এর margin নির্দেশ করে।

auto

আনুভুমিকভাবে মাঝামাঝিতে কোন একটি element কে রাখতে margin:auto; ব্যবহার করা হয়। নিচের উদাহরণটি দেখুনঃ

ফলাফল

auto কাজ করানোর জন্য অবশ্যই width সেট করতে হবে।

Next Previous