CSS মার্জিন (Margin): সম্পূর্ণ গাইড এবং উদাহরণ

ওয়েব পেজে এলিমেন্টের মধ্যে khoảng থাকা আকর্ষণীয় এবং কার্যকর ইউজার এক্সপেরিয়েন্স ডিজাইন করার একটি গুরুত্বপূর্ণ অংশ। মার্জিন (Margin) একটি HTML এলিমেন্টের চারপাশে খালি khu vực তৈরি করতে ব্যবহৃত হয় যাতে তা পৃষ্ঠার অন্যান্য অবজেক্ট থেকে পৃথক থাকে।

CSS মার্জিন প্রোপার্টি

CSS মার্জিন প্রোপার্টি এবং এর চারটি সাব-প্রোপার্টি HTML-এ একটি এলিমেন্টের চারপাশে মার্জিন সেট করতে ব্যবহৃত হয়। এই টিউটোরিয়ালে রেফারেন্স এবং উদাহরণের মাধ্যমে মার্জিন প্রোপার্টি এবং এর সাব-প্রোপার্টি ব্যবহার করে CSS-এ একটি এলিমেন্টের চারপাশে মার্জিন তৈরি করার পদ্ধতি আলোচনা করা হয়েছে। এই টিউটোরিয়াল পড়া শেষে আপনি CSS ব্যবহার করে ওয়েব এলিমেন্টে মার্জিন প্রয়োগ করতে পারবেন।

CSS মার্জিন কী?

CSS মার্জিন প্রোপার্টি একটি এলিমেন্টের চারপাশে স্পেস তৈরি করতে ব্যবহৃত হয়। এই স্পেস আপনাকে একটি ওয়েব পেজে বিভিন্ন এলিমেন্ট সহজে পৃথক করতে দেয়, যেকোনো বর্ডারের বাইরে।

CSS-এ মার্জিন প্রোপার্টি চারটি সাব-প্রোপার্টির শর্টহ্যান্ড। এই সাব-প্রোপার্টিগুলি একটি ওয়েব এলিমেন্টের উপরের, ডানের, নিচের এবং বামের মার্জিন সেট করতে ব্যবহৃত হয়।

ওয়েব পেজের প্রতিটি এলিমেন্ট এক বা একাধিক বক্স নিয়ে গঠিত। এলিমেন্টগুলো বক্স মডেল ব্যবহার করে আউटलাইন করে যে বক্সটি ওয়েব পেজে কীভাবে প্রদর্শিত হবে।

মার্জিন বক্স মডেলের প্রধান উপাদানগুলির একটি এবং বক্স মডেলের বাহ্যিক লেয়ারে অবস্থিত। নিচের গ্রাফিকে আপনি দেখতে পারেন যে মার্জিন একটি HTML এলিমেন্টের বর্ডারের বাইরে প্রয়োগ করা হয়:

এই টিউটোরিয়ালের উদ্দেশ্যে আমরা মার্জিন প্রোপার্টির ওপর ফোকাস করব। যদি আপনি বক্স মডেলের বিভিন্ন উপাদান সম্পর্কে আরও জানতে চান, তবে আপনি CSS বর্ডার এবং প্যাডিং সম্পর্কে আমাদের আর্টিকেলগুলো পড়তে পারেন।

CSS אינডিভিজুয়াল সাইডস (Individual Sides)

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

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

এই প্রোপার্টিগুলি আপনাকে একটি এলিমেন্টের নির্দিষ্ট সাইডের মার্জিন সংজ্ঞায়িত করতে দেয়। এই প্রোপার্টিগুলির প্রতিটি মার্জিনের আকার নির্ধারণের জন্য চারটি মান গ্রহণ করে। সেগুলি হলো:

• length (লেন্থ) - px, em, বা অন্য CSS লেন্থ মাপ একক ব্যবহার করে মার্জিন নির্দিষ্ট করে।
• percentage (পার্সেন্টেজ) - (%) már্জিনটি إلিমেন্টের প্রস্থের শতাংশ হিসেবে নির্দিষ্ট করে।
• auto - ব্রাউজারকে মার্জিন ক্যালকুলেট করতে বলে।
• inherit - মার্জিনটি প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পাওয়ার নির্দেশ দেয়।

চলুন একটি উদাহরণের মাধ্যমে মার্জিন সাব-প্রোপার্টিগুলি কীভাবে কাজ করে তা আলোচনা করি।

মান लीজिए আমরা একটি বক্স ডিজাইন করছি এবং আমরা আমাদের বক্সের চারপাশে মার্জিন যোগ করতে চাই যাতে তা পৃষ্ঠার অন্যান্য এলিমেন্ট থেকে পৃথক থাকে। আমাদের বক্সের উপরে 50px, বামে 30px, ডানে 40px এবং নিচে 50px মার্জিন থাকবে। আমরা নিচের কোড ব্যবহার করে এই বক্সটি তৈরি করতে পারি:

index.html
<div class="outer">
  <p class="box"> This is a box. </p>
</div>

styles.css
.box {
  margin-top: 50px;
  margin-left: 30px;
  margin-right: 40px;
  margin-bottom: 40px;
  border: 1px solid red;
}
.outer {
  border: 1px solid blue;
}

আমাদের কোডের আউটপুট:

আমাদের কোডে আমরা দুটি বক্স তৈরি করেছি। প্রথম বক্স, যা <div> ট্যাগ ব্যবহার করে সংজ্ঞায়িত, outer ক্লাস ему আছে। আমাদের CSS ফাইলে, আমরা বলেছি যে outer ক্লাস 가진 যেকোনো এলিমেন্টের 1px প্রস্থের স olid নীল বর্ডার থাকবে। আমরা এই বর্ডারটি সংজ্ঞায়িত করেছি আমাদের ইনার বক্স তৈরি করা মার্জিন দেখানোর জন্য।

আমাদের <div> ট্যাগের ভিতরে একটি <p> ট্যাগ রয়েছে, যাতে This is a box টেক্সট রয়েছে। আমাদের <p> ট্যাগের ক্লাস নাম box, যার মানে আমাদের CSS ফাইলের box এর জন্য স্টাইল আমাদের <p> এলিমেন্টে প্রযোজ্য হবে।

আমাদের <p> ট্যাগে 50px উপরের মার্জিন, 30px বামের মার্জিন, 40px ডানের মার্জিন, এবং 40px নিচের মার্জিন নির্ধারণ করা হয়েছে। আমরা আমাদের <p> ট্যাগে 1px প্রস্থের স olid লাল বর্ডারও দিয়েছি। আপনি উপরের ছবিতে দেখতে পারেন, আমাদের মার্জিন আমাদের <p> বক্সের বর্ডার এবং আমাদের নীল বক্সের মধ্যে একটি গ্যাপ তৈরি করেছে। যদি আমাদের কোনো মার্জিন না থাকত, তবে এই বক্সগুলো একে অপরের কাছে থাকত।

CSS মার্জিন শর্টহ্যান্ড (Shorthand)

উপরের উদাহরণে, আমরা আমাদের বক্সে প্রয়োগ করতে চাওয়া মার্জিনগুলি নির্দিষ্ট করতে চার লাইন কোড ব্যবহার করেছি। আমরা মার্জিন প্রোপার্টি ব্যবহার করে আমাদের কোড আরও দক্ষ করতে পারি।

মার্জিন প্রোপার্টি আমরা আগে আলোচনা 했던 চারটি সাব-প্রোপার্টির শর্টহ্যান্ড। এই প্রোপার্টি আপনাকে একটি বক্সের মার্জিনগুলি কোডের এক লাইনে নির্দিষ্ট করতে দেয়, একাধিক লাইনের পরিবর্তে।

মার্জিন শর্টহ্যান্ডের সিনট্যাক্স আপনি কতটি মান নির্দিষ্ট করেছেন তার ওপর নির্ভর করে। আপনি কমপক্ষে একটি এবং সর্বোচ্চ চারটি মান নির্দিষ্ট করতে পারেন। চলুন মার্জিন শর্টহ্যান্ড প্রোপার্টির সমস্ত সম্ভাব্য ব্যবহারের উদাহরণ দেখি।

চারটি মান (Four Values)

একটি বক্সে চারটি ভিন্ন মার্জিন মান তৈরি করতে ইনডিভিজুয়াল মার্জিন সাব-প্রোপার্টি ব্যবহার করার পরিবর্তে, আপনি মার্জিন শর্টহ্যান্ড প্রোপার্টি ব্যবহার করে চারটি মান নির্দিষ্ট করতে পারেন।

আপনি যদি মার্জিন প্রোপার্টির সাথে চারটি মান নির্দিষ্ট করেন, তবে আপনার মার্জিনগুলির ক্রম হবে:

• প্রথম মান হলো উপরের মার্জিন (top margin)।
• দ্বিতীয় মান হলো ডানের মার্জিন (right margin)।
• তৃতীয় মান হলো নিচের মার্জিন (bottom margin)।
• চতুর্থ মান হলো বামের মার্জিন (left margin)।

মান লইজिए আমরা একটি বক্স তৈরি করতে চাই যার 25px উপরের মার্জিন, 25px ডানের মার্জিন, 50px নিচের মার্জিন, এবং 60px বামের মার্জিন থাকবে। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:

.box {
  margin: 25px 25px 50px 60px;
  border: 1px solid red;
}

আমাদের কোডের আউটপুট:

আমাদের উদাহরণে, আমরা একটি ইনার বক্স তৈরি করেছি যার প্রতিটি প্রান্তে উপরে নির্দিষ্ট মান অনুযায়ী ভিন্ন মার্জিন রয়েছে। আমরা আমাদের ইনার বক্সকে 1px প্রস্থের স olid লাল বর্ডার দিয়ে ঘেরেছি। علاوه на ذلك, আমরা আমাদের ব্লু বক্সের কোড পুনরায় ব্যবহার করেছি আপ্লাই করা মার্জিনের আকার ব্যাখ্যা করার জন্য।

তিনটি মান (Three Values)

আপনি যদি একটি ভিন্ন উপরের এবং নিচের মার্জিন চান, কিন্তু বক্সের বাম এবং ডানের জন্য একই মার্জিন ব্যবহার করতে চান, তবে আপনি মার্জিন প্রোপার্টি ব্যবহার করে তিনটি মান নির্দিষ্ট করতে পারেন।

আপনি যেসব তিনটি মার্জিন নির্দিষ্ট করবেন সেগুলি একটি বক্সে নিচের ক্রমে প্রযোজ্য হবে:

• প্রথম মান হলো উপরের মার্জিন।
• দ্বিতীয় মান হলো এলিমেন্টের ডান এবং বাম পাশের মার্জিন।
• তৃতীয় মান হলো নিচের মার্জিন।

মান লইজिए আমরা একটি বক্স তৈরি করতে চাই যার উপরে 50px মার্জিন, বাম এবং ডানে 25px মার্জিন, এবং নিচে 60px মার্জিন থাকবে। আমরা নিচের কোড ব্যবহার করে এই মার্জিনসহ একটি বক্স তৈরি করতে পারি:

.box {
  margin: 50px 25px 60px;
  border: 1px solid red;
}

আমাদের কোডের আউটপুট:

আপনি দেখতে পারেন, আমাদের ইনার বক্সের বাম এবং ডান পাশের একই মার্জিন মান রয়েছে—25px —এবং উপরের এবং নিচের পাশের তাদের নিজস্ব মার্জিন রয়েছে (50px এবং 60px)।

আমাদের কোডে, আমরা আমাদের ইনার বক্সের চারপাশে একটি লাল বর্ডার সংজ্ঞায়িত করেছি আমাদের মার্জিনগুলি কোথায় প্রযোজ্য তা ব্যাখ্যা করার জন্য। আমরা আমাদের প্রথম উদাহরণ থেকে কোড পুনরায় ব্যবহার করেছি একটি নীল বক্স তৈরি করতে যা ইনার বক্সের চারপাশে মার্জিন দ্বারা তৈরি গ্যাপ দেখায়।

দুইটি মান (Two Values)

আপনি যদি একটি বক্সের উপরের এবং নিচের জন্য একই মার্জিন মান এবং বক্সের ডান এবং বাম পাশের জন্য অন্য একটি মান চান, তবে আপনি মার্জিন প্রোপার্টি ব্যবহার করে দুটি মান নির্দিষ্ট করতে পারেন।

আপনি যেসব মান নির্দিষ্ট করবেন সেগুলি একটি এলিমেন্টে নিচের ক্রমে প্রযোজ্য হবে:

• প্রথম মান হলো বক্সের উপরের এবং নিচের মার্জিন।
• দ্বিতীয় মান হলো বক্সের ডান এবং বাম পাশের মার্জিন।

মান লইজिए আপনি একটি বক্স তৈরি করতে চাই যার 50px ভার্টিক্যাল মার্জিন এবং 30px হরিজন্টাল মার্জিন থাকবে। আপনি নিচের CSS স্টাইল ব্যবহার করে এই বক্সটি তৈরি করতে পারেন:

.box {
  margin: 50px 30px;
  border: 1px solid red;
}

আমাদের কোডের আউটপুট:

আমাদের বক্সের উপরে এবং নিচে 50px মার্জিন রয়েছে, এবং বাম এবং ডান পাশের উভয়ের 30px মার্জিন রয়েছে।

আমাদের কোডে, আমরা আমাদের ইনার বক্সের চারপাশে একটি লাল বর্ডার নির্দিষ্ট করেছি আমাদের মার্জিনের আকার প্রদর্শন করার জন্য। আমরা আমাদের আগের উদাহরণ থেকে কোড পুনরায় ব্যবহার করেছি একটি নীল বক্স তৈরি করতে যা ইনার এবং আউটার বক্সের মধ্যে মার্জিন দ্বারা তৈরি স্পেস দেখায়।

একটি মান (One Value)

আপনি যদি একটি বক্সের প্রতিটি পাশে একই মার্জিন চান, তবে আপনি মার্জিন প্রোপার্টি ব্যবহার করার সময় শুধু একটি মান নির্দিষ্ট করলেই হবে। আপনি যে মানটি নির্দিষ্ট করবেন সেটি বক্সের চারপাশে সেট করা মার্জিন হবে।

মান লইজिए আপনি একটি বক্স তৈরি করতে চাই যার চারপাশে 50px সিঙ্গল মার্জিন থাকবে। আপনি নিচের কোড ব্যবহার করে এটি করতে পারেন:

.box {
  margin: 50px;
  border: 1px solid red;
}

আমাদের কোডের আউটপুট:

আমাদের বক্সের প্রতিটি বর্ডারের 50px মার্জিন রয়েছে। আমরা আমাদের বক্সের চারপাশে একটি লাল বর্ডার নির্দিষ্ট করেছি যাতে দেখা যায় আমাদের মার্জিন বক্সের বর্ডারের বাইরে প্রযোজ্য, এবং আমরা একটি নীল বক্সও তৈরি করেছি যেখানে আমাদের লাল বক্সটি রাখা হয়েছে আমাদের মার্জিন আরও ভালোভাবে ব্যাখ্যা করার জন্য।

Margin Inherit

inherit মান একটি প্যারেন্ট এলিমেন্ট থেকে মার্জিন উত্তরাধিকার সূত্রে পाने के জন্য ব্যবহৃত হয়।

একটি ইনার বক্সের মার্জিনকে আউটার বক্সের মার্জিনের সমান সেট করতে, আমরা inherit মান ব্যবহার করতে পারি। inherit মান কার্যকর কারণ যদি আপনি প্যারেন্ট এলিমেন্টের মার্জিন পরিবর্তন করেন, তবে চাইল্ড এলিমেন্টের মার্জিন—প্যারেন্ট এলিমেন্টের ভিতরের বক্স—স্বয়ংক্রিয়ভাবে সমন্বিত হবে।

মান লইজिए আমরা একটি বক্স ডিজাইন করছি যার প্যারেন্ট এলিমেন্টের 50px বামের মার্জিন রয়েছে। আমরা আমাদের প্যারেন্ট এলিমেন্টের ভিতরে থাকা বক্সের একই মার্জিন মান থাকতে চাই। আমরা এই কাজ সম্পন্ন করতে নিচের কোড ব্যবহার করতে পারি:

.box {
  margin-left: inherit;
  border: 1px solid red;
}
.outer {
  margin-left: 50px;
  border: 1px solid blue;
}

আমাদের কোডের আউটপুট:

আমাদের আউটার বক্স (নীল বর্ডার વਾਲা) এর 50px বামের মার্জিন রয়েছে। 덧붙ে, আমাদের ইনার বক্স (লাল বর্ডার Вালা) এর 50px বামের মার্জিন রয়েছে, যা এটা তার প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পেয়েছে।

Margin Auto

auto মান একটি এলিমেন্টকে এর কন্টেইনারের মধ্যে হরিজন্টালি কেন্দ্রস্থ করতে ব্যবহৃত হয়।

auto মান একটি ইনার এলিমেন্টকে আপনার সংজ্ঞায়িত মান অনুযায়ী একটি প্রস্থ নিতে দেয়, তারপর অবশিষ্ট স্পেস বাম এবং ডান মার্জিনের মধ্যে বিভক্ত হয়।

মান লইজिए আপনার কাছে একটি 250px প্রস্থের বক্স রয়েছে 500px প্রস্থের একটি বক্সের ভিতরে। যদি আপনি মার্জিন তৈরি করতে auto কীওয়ার্ড ব্যবহার করেন, তবে বক্সের বাম এবং ডানে 125px মার্জিন প্রযোজ্য হবে। আমরা নিচের ফর্মুলা ব্যবহার করে এটি ক্যালকুলেট করেছি:

(Outer Box Width - Inner Box Width) / 2

এই ক্ষেত্রে, আমরা আমাদের স্বয়ংক্রিয়ভাবে তৈরি মার্জিনের আকার ক্যালকুলেট করতে নিচের যোগফল ব্যবহার করেছি:

(500 - 250) / 2

এই সমস্যার উত্তর 125, যা একটি বক্সের বাম এবং ডান মার্জিনে প্রযোজ্য হবে। এখানে এই মাপের একটি বক্সের উদাহরণ দেওয়া হলো:

index.html
<div class="outer">
  <p class="box"> This is a box. </p>
</div>

styles.css
.box {
  width: 250px;
  margin: auto;
  border: 1px solid red;
}
.outer {
  width: 500px;
  border: 1px solid blue;
}

আমাদের কোডের আউটপুট:

আপনি দেখতে পারেন, আমাদের ইনার বক্সের (লাল বর্ডার ওয়ালা) বাম এবং ডান পাশের সমান মার্জিন তৈরি হয়েছে। অন্য কথায়, আমাদের ইনার বক্স হরিজন্টালি কেন্দ্রস্থ হয়েছে। এটি হলো কারণ আমরা আমাদের ইনার বক্সের মার্জিন নির্দিষ্ট করতে margin: auto মান ব্যবহার করেছি।

আমাদের ইনার বক্সের উপরে বা নিচে কোনো মার্জিন নেই, কারণ আমরা আমাদের উদাহরণের জন্য সেগুলি নির্দিষ্ট করিনি।

উপসংহার (Conclusion)

CSS মার্জিন প্রোপার্টি একটি এলিমেন্টের বর্ডার এবং ওয়েব পেজের অন্যান্য এলিমেন্টের মধ্যে স্পেস তৈরি করতে ব্যবহৃত হয়।

উদাহরণের রেফারেন্স নিয়ে এই টিউটোরিয়ালে CSS মার্জিন প্রোপার্টি কীভাবে ব্যবহার করতে হয়, এবং এর চারটি সাব-প্রোপার্টি কীভাবে ব্যবহার করে একটি এলিমেন্টের বর্ডার এবং ওয়েব পেজের অন্যান্য এলিমেন্টের মধ্যে স্পেস তৈরি করতে হয় তা আলোচনা করা হয়েছে। এখন আপনি CSS মার্জিন প্রোপার্টি প্রোফেশনালি ব্যবহার করার জন্য সজ্জিত!