সিএসএস মার্জিন
সিএসএস মার্জিন
একটি এলিমেন্টের চারপাশে স্পেস রাখার জন্য সিএসএস margin প্রোপার্টিটি ব্যবহার করা হয়।
সিএসএস margin প্রোপার্টি দ্বারা একটি এলিমেন্টের বর্ডার এর বাহিরে কি পরিমান ফাকা জায়গা থাকবে তা সেট করা হয়।
সিএসএস এর মাধ্যমে, আপনি মার্জিনকে নিয়ন্ত্রণ করতে পারেন। একটি এলিমেন্টের চারপাশে পৃথক পৃথক মার্জিন সেট করার জন্য পৃথক পৃথক সিএসএস margin প্রোপার্টি রয়েছে। যেগুলো হলো: top, right, bottom এবং left।
এই এলিমেন্টটিতে 50px মার্জিন ব্যবহার করা হয়েছে।
এক নজরে সিএসএস মার্জিন প্রোপার্টিসমূহ
একটি ডিক্লেয়ারেশনের মাধ্যমে মার্জিনের সবগুলো প্রোপার্টি সেট করার একটি শর্টহ্যান্ড প্রোপার্টি।
এলিমেন্টের উপরের মার্জিন সেট করার জন্য ব্যবহৃত হয়।
এলিমেন্টের ডানের মার্জিন সেট করার জন্য ব্যবহৃত হয়।
এলিমেন্টের নিচের মার্জিন সেট করার জন্য ব্যবহৃত হয়।
এলিমেন্টের বামের মার্জিন সেট করার জন্য ব্যবহৃত হয়।
পৃথক পৃথক মার্জিন প্রোপার্টিসমূহ
একটি এলিমেন্ট চারপাশে পৃথকভাবে মার্জিন সেট করার জন্য সিএসএসে ব্যবহৃত margin প্রোপার্টিসমূহ নিম্নে তুলে ধরা হলোঃ-
margin-topmargin-rightmargin-bottommargin-left
এই মার্জিন প্রোপার্টিগুলো নিচের ভ্যালুসমূহ গ্রহণ করতে পারেঃ
auto- ব্রাউজার নিজ থেকে মার্জিন নিয়ে নেয়।- length - px, pt, cm, ইত্যাদি একক ব্যবহার করে মার্জিন সেট করা হয়
- % - সংশ্লিষ্ট এলিমেন্টের প্রস্থ(width) অনুযায়ী মার্জিন সেট করা হয়।
inherit- প্যারেন্ট(parent) ট্যাগ এর সাপেক্ষে উত্তরাধিকার সূ্ত্রে মার্জিন নিয়ে নেয়।
নিচের উদাহরণে <p> এলিমেন্টের প্রত্যেক পাশে বিভিন্ন প্রকার মার্জিনের ব্যবহার দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
border: 2px solid blue;
margin-top: 80px;
margin-bottom: 110px;
margin-right: 130px;
margin-left: 100px;
background-color: #0099aa;
padding:8px;
}
</style>
</head>
<body>
<div>এই div এলিমেন্টের উপরে 80px, ডানে 130px, নিচে 110px এবং বামে 100px মার্জিন সেট করা হয়েছে।</div>
</body>
</html>
ফলাফল
মার্জিন - শর্টকাট প্রোপার্টি
কোড সংক্ষিপ্ত করার জন্য সকল মার্জিন প্রোপার্টিকে একটি শর্টকাট প্রোপার্টির মাধ্যমে প্রকাশ করা সম্ভব।
নিচের পৃথক পৃথক মার্জিন প্রোপার্টিসমূহের শটকার্ট প্রোপার্টি হলো margin প্রোপার্টিঃ
margin-topmargin-rightmargin-bottommargin-left
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
border: 2px solid blue;
margin: 80px 130px 110px 100px;
background-color: #0099aa;
padding:8px;
}
</style>
</head>
<body>
<div>এই div এলিমেন্টের উপরে 80px, ডানে 130px, নিচে 110px, এবং বামে 100px মার্জিন সেট করা হয়েছে।</div>
</body>
</html>
ফলাফল
উপরের উদাহরনটি কিভাবে কাজ করে নিচে তা উদাহরণসহ ব্যাখ্যা করা হলোঃ
যদি margin প্রোপার্টিতে চারটি ভ্যালু থাকেঃ
-
যেমন-
- উপরের মার্জিন 50px হবে।
- ডানের মার্জিন 40px হবে।
- নিচের মার্জিন 80px হবে।
- বামের মার্জিন 70px হবে।
margin: 50px 40px 80px 70px;
যদি margin প্রোপার্টিতে তিনটি ভ্যালু থাকেঃ
-
যেমন-
- উপরের মার্জিন 50px হবে।
- ডান ও বামের মার্জিন 40px হবে।
- নিচের মার্জিন 80px হবে।
margin: 50px 40px 80px;
যদি margin প্রোপার্টিতে দুইটি ভ্যালু থাকেঃ
-
যেমন-
- উপরের এবং নিচের মার্জিন 50px হবে।
- ডানের ও বামের মার্জিন 80px হবে।
margin: 50px 80px;
যদি margin প্রোপার্টিতে একটি ভ্যালু থাকেঃ
-
যেমন-
- চার পাশের মার্জিন 50px হবে।
margin: 50px;
"auto" ভ্যালুর ব্যবহার
একটি এলিমেন্ট যে কন্টেইনারের মধ্যে আছে সেই কন্টেইনারের অনুভূমিক বরাবর যদি সেটিকে সেন্টারে রাখতে চান তাহলে margin প্রোপার্টির ভ্যালু auto সেট করুন।
এক্ষেত্রে এলিমেন্টটি স্বয়ংক্রিয়ভাবে নির্দিষ্ট প্রস্থ নিয়ে নিবে এবং অবশিষ্ট ফাঁকা জায়গাটি ডান এবং বামপাশে সমান ভাবে ভাগ করে দিবে। অর্থাৎ এলিমেন্টটি সেন্টারে অবস্থান করবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div {
width:320px;
margin: auto;
border: 2px solid teal;
padding: 8px;
}
</style>
</head>
<body>
<h2>auto ভ্যালুর ব্যবহার</h2>
<div>এই div টিতে margin: auto; সেট করা হয়েছে।</div>
</body>
</html>
ফলাফল
"inherit" ভ্যালুর ব্যবহার
নিচের উদাহরণে পেরেন্ট এলিমেন্ট থেকে inherit এর মাধ্যমে <p> এলিমেন্ট বাম পাশের মার্জিন নিয়ে নেয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div.main {
border: 2px solid teal;
margin-left: 180px;
}
p.child {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>inherit ভ্যালুর ব্যবহার</h2>
<div class="main">
<p class="child">এই এলিমেন্টের বাম পাশের মার্জিন প্যারেন্ট এলিমেন্ট থেকে এসেছে।</p>
</div>
</body>
</html>
ফলাফল
মার্জিন কলাপ্স
এলিমেন্টের উপরের এবং নিচের মার্জিন মাঝে-মাঝে কলাপ্স হয়ে সিঙ্গেল মার্জিনে পরিনত হয় এবং যার ভ্যালূ হবে মার্জিন দুটির ভ্যালুর মধ্যে সর্বোচ্চটি।
এটি হরিজন্টাল মার্জিন বা ডান এবং বামের মার্জিনের ক্ষেত্রে ঘটে না। শুধুমাত্র ভার্টিক্যাল মার্জিন বা উপরের এবং নিচের মার্জিনের ক্ষেত্রে ঘটে।
নিচের উদাহরণটি লক্ষ্য করলে এটি আপনার কাছে পরিষ্কার হয়ে যাবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
h1 {
margin: 0 0 60px 0;
}
h2 {
margin: 40px 0 0 0;
}
</style>
</head>
<body>
<p>মার্জিন কলাপ্সের</p>
<h1>স্যাট একাডেমি</h1>
<h2>স্যাট একাডেমি</h2>
</body>
</html>
ফলাফল
এই উদাহরণটিতে <h1> এলিমেন্টের নিচে 60px এবং <h2> এলিমেন্টের উপরে 40px মার্জিন দেয়া হয়েছে।
উপরের উদাহরণ দেখে আপনি খুব সহজেই বলে দিবেন যে, <h1> এবং <h2> এর মধ্যে ভার্টিকাল মার্জিন হবে 100px(60px+40px)। কিন্তু এখানে মার্জিন কলাপ্স ব্যবহৃত হওয়ার কারণে প্রকৃতপক্ষে মার্জিন হবে 60px।