CSS মার্জিন (CSS Margins) [বাংলায় CSS মাস্টার ক্লাস]: মার্জিন হল একটি উপাদানের বাইরের চারপাশের শূন্যস্থান। তারা একটি উপাদানের সীমানা এবং প্রতিবেশী উপাদানগুলির মধ্যে দূরত্ব বা এটির উপাদানের সীমানা নির্ধারণ করে। CSS একটি উপাদানের প্রতিটি দিকের জন্য মার্জিন বৈশিষ্ট্য প্রদান করে: মার্জিন-টপ, মার্জিন-ডান, মার্জিন-নিচ এবং মার্জিন-বাম (margin-top, margin-right, margin-bottom, margin-left)। এই বৈশিষ্ট্যগুলি বিকাশকারীদের স্বাধীনভাবে পৃথক পক্ষের জন্য মার্জিন সেট করার অনুমতি দেয়, লেআউটের উপর সূক্ষ্ম-দানাযুক্ত নিয়ন্ত্রণ প্রদান করে। উপাদানগুলির মধ্যে স্থান এবং বিচ্ছেদ তৈরির জন্য মার্জিনগুলি গুরুত্বপূর্ণ৷ তারা দৃশ্যমান শ্বাস-প্রশ্বাসের কক্ষ স্থাপন করে, যাতে বিষয়বস্তু আরও পাঠযোগ্য এবং নান্দনিকভাবে আনন্দদায়ক হতে পারে। পর্যাপ্ত মার্জিন বিশৃঙ্খলা এড়াতে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতেও সাহায্য করে।
মার্জিন নির্দিষ্ট পরিস্থিতিতে ভেঙে পড়তে পারে, যেমন দুটি সংলগ্ন ব্লক-স্তরের উপাদানের উল্লম্ব মার্জিন থাকে। এই ধরনের ক্ষেত্রে, দুটি মার্জিনের মধ্যে বড়টি প্রাধান্য পায়, এবং ছোটটি ভেঙে যায়, উপাদানগুলির মধ্যে ব্যবধান হ্রাস করে। মার্জিন পতন বোঝা সুনির্দিষ্ট লেআউট নিয়ন্ত্রণের জন্য অত্যন্ত গুরুত্বপূর্ণ।
মার্জিন প্রতিক্রিয়াশীল ওয়েব ডিজাইনের অবিচ্ছেদ্য অংশ। মার্জিন মানগুলির জন্য শতাংশ বা ইএমএসের (percentages or ems) মতো আপেক্ষিক ইউনিটগুলি ব্যবহার করা নিশ্চিত করে যে লেআউটগুলি বিভিন্ন স্ক্রীনের আকার এবং অভিযোজনের সাথে সুন্দরভাবে খাপ খায়।
margin এর কিছু property সম্পর্কে নিচে দেওয়া হল।
- margin-top
- margin-right
- margin-bottom
- margin-left
CSS মার্জিন (CSS Margins) সম্পর্কে বিস্তারিত নিচে দেওয়া হল।
Example:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS MASTER JHUTANDA</title>
<!--https://jhutanda.com-->
<!--https://github.com/jhutanda-->
</head>
<body>
<p><button class="b1">Button1</button></p>
<p><button class="b2">Button2</button></p>
<p><button class="b3">Button3</button></p>
<p><button class="b4">Button4</button></p>
<p><button class="b5">Button5</button></p>
<p><button class="b6">Button6</button></p>
<!-- css style -->
<style>
p {
background-color: aqua;
}
/* margin 10px */
.b1 {
margin: 10px;
}
/* margin top, right, bottom, left */
.b2 {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 50px;
margin-left: 100px;
}
/* all margin in one line - top, right, bottom, left*/
.b3 {
margin: 50px 10px 30px 50px;
}
/* margin in two dimention top-bottom, left-right */
.b4 {
margin: 20px 50px;
}
/* margin "0 px" */
.b5 {
margin: 0 0 0 100px;
}
.b6 {
margin: 50px 0 0 150px;
}
</style>
</body>
</html>