CSS মার্জিন

ট্যাগ রয়েছে, যেটিতে This is a box লেখা রয়েছে . আমাদের

ট্যাগের ক্লাসের নাম box আছে , যার মানে হল box-এর শৈলী আমাদের CSS ফাইলে আমাদের

উপাদান।

আমাদের

ট্যাগ একটি 50px শীর্ষ মার্জিন, 30px বাম মার্জিন, 40px ডান মার্জিন, এবং 40px নীচের মার্জিন বরাদ্দ করা হয়েছে৷ আমরা আমাদের

ট্যাগকে 1px-চওড়া কঠিন লাল বর্ডার দিয়েছি। আপনি উপরের ছবিতে দেখতে পাচ্ছেন, আমাদের মার্জিন আমাদের

বক্স এবং আমাদের নীল বক্সের সীমানার মধ্যে একটি ফাঁক তৈরি করেছে। যদি আমাদের কোন মার্জিন না থাকে তবে এই বাক্সগুলি একসাথে কাছাকাছি থাকত৷

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

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

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

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

চারটি মান

চারটি ভিন্ন মার্জিন মান সহ একটি বক্স তৈরি করতে পৃথক মার্জিন সাবপ্রপার্টি ব্যবহার করার পরিবর্তে, আপনি মার্জিন শর্টহ্যান্ড বৈশিষ্ট্য ব্যবহার করতে পারেন এবং চারটি মান নির্দিষ্ট করতে পারেন৷

আপনি যদি মার্জিন প্রপার্টির সাথে চারটি মান উল্লেখ করেন, তাহলে আপনার মার্জিন যে ক্রমে প্রদর্শিত হবে তা নিম্নরূপ:

• প্রথম মান হল উপরের মার্জিন৷
৷
• দ্বিতীয় মান হল ডান মার্জিন।
• তৃতীয় মান হল নিচের মার্জিন।
• চতুর্থ মান হল বাম মার্জিন।

ধরুন আমরা একটি 25px শীর্ষ মার্জিন, একটি 25px ডান মার্জিন, একটি 50px নীচের মার্জিন এবং একটি 60px বাম মার্জিন সহ একটি বক্স তৈরি করতে চেয়েছিলাম। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

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

আমাদের কোড ফিরে আসে:

আমাদের উদাহরণে, আমরা উপরে উল্লিখিত মানগুলির উপর ভিত্তি করে প্রতিটি প্রান্তে একটি ভিন্ন মার্জিন সহ একটি অভ্যন্তরীণ বাক্স তৈরি করেছি। আমরা আমাদের ভিতরের বাক্সটিকে 1px-প্রশস্ত কঠিন লাল মার্জিন দিয়ে ঘিরে রেখেছি। উপরন্তু, আমরা আমাদের বাক্সে প্রয়োগ করা মার্জিনের আকার চিত্রিত করার জন্য আমাদের নীল বক্সের কোডটি আগের থেকে পুনরায় ব্যবহার করি৷

তিনটি মান

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

আপনি যে তিনটি মার্জিন নির্দিষ্ট করেছেন তা একটি বাক্সে প্রয়োগ করা হয়েছে নিম্নরূপ:

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

ধরা যাক আমরা বক্সের উপরের দিকে একটি 50px মার্জিন, বাক্সের বাম এবং ডানদিকে একটি 25px মার্জিন এবং বাক্সের নীচে একটি 60px মার্জিন সহ একটি বক্স তৈরি করতে চেয়েছিলাম৷ আমরা নিম্নলিখিত কোড ব্যবহার করে এই মার্জিনগুলির সাথে একটি বাক্স তৈরি করতে পারি:

আমাদের কোড ফিরে আসে:

আমাদের উদাহরণে, আমরা উপরে উল্লিখিত মানগুলির উপর ভিত্তি করে প্রতিটি প্রান্তে একটি ভিন্ন মার্জিন সহ একটি অভ্যন্তরীণ বাক্স তৈরি করেছি। আমরা আমাদের ভিতরের বাক্সটিকে 1px-প্রশস্ত কঠিন লাল মার্জিন দিয়ে ঘিরে রেখেছি। উপরন্তু, আমরা আমাদের বাক্সে প্রয়োগ করা মার্জিনের আকার চিত্রিত করার জন্য আমাদের নীল বক্সের কোডটি আগের থেকে পুনরায় ব্যবহার করি৷

তিনটি মান

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

আপনি যে তিনটি মার্জিন নির্দিষ্ট করেছেন তা একটি বাক্সে প্রয়োগ করা হয়েছে নিম্নরূপ:

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

ধরা যাক আমরা বক্সের উপরের দিকে একটি 50px মার্জিন, বাক্সের বাম এবং ডানদিকে একটি 25px মার্জিন এবং বাক্সের নীচে একটি 60px মার্জিন সহ একটি বক্স তৈরি করতে চেয়েছিলাম৷ আমরা নিম্নলিখিত কোড ব্যবহার করে এই মার্জিনগুলির সাথে একটি বাক্স তৈরি করতে পারি:

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

আমাদের কোড ফিরে আসে:

আপনি দেখতে পাচ্ছেন, আমাদের অভ্যন্তরীণ বাক্সের বাম এবং ডান দিকে একই মার্জিন মান রয়েছে—25px — এবং উপরের এবং নীচের দিকগুলির নিজস্ব মার্জিন রয়েছে (যথাক্রমে 50px এবং 60px)।

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

দুটি মান

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

আপনার নির্দিষ্ট করা মানগুলি একটি উপাদানে প্রয়োগ করা হয় তা হল:

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

ধরা যাক আপনি একটি 50px উল্লম্ব মার্জিন এবং একটি 30px অনুভূমিক মার্জিন সহ একটি বাক্স তৈরি করতে চান। আপনি নিম্নলিখিত CSS শৈলী ব্যবহার করে এই বাক্সটি তৈরি করতে পারেন:

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

আমাদের কোড ফিরে আসে:

আমাদের বাক্সের উপরের এবং নীচের দিকে একটি 50px মার্জিন রয়েছে এবং বাম এবং ডান উভয় দিকেই 30px মার্জিন রয়েছে৷

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

এক মান

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

ধরুন আপনি সমস্ত সীমানার চারপাশে 50px একক মার্জিন সহ একটি বাক্স তৈরি করতে চান। আপনি এই কোড ব্যবহার করে তা করতে পারেন:

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

আমাদের কোড ফিরে আসে:

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

মার্জিন ইনহেরিট

উত্তরাধিকার মান একটি অভিভাবক উপাদান থেকে একটি মার্জিন উত্তরাধিকারী করতে ব্যবহৃত হয়।

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

ধরুন আমরা একটি বাক্স ডিজাইন করছি যার মূল উপাদানটির একটি 50px বাম মার্জিন রয়েছে। আমরা চাই আমাদের মূল উপাদানের মধ্যে থাকা বাক্সের একই মার্জিন মান থাকুক। আমরা এই কাজটি সম্পন্ন করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:

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

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

আমাদের কোড ফিরে আসে:

আমাদের বাইরের বাক্সে (একটি নীল বর্ডার সহ) 50px এর বাম মার্জিন রয়েছে। এছাড়াও, আমাদের অভ্যন্তরীণ বাক্সে (একটি লাল বর্ডার সহ) একটি বাম মার্জিন 50px, যা এটি এর মূল উপাদান থেকে উত্তরাধিকারসূত্রে পেয়েছে৷

মার্জিন স্বয়ংক্রিয়

স্বয়ংক্রিয় মানটি একটি উপাদানকে তার কন্টেইনারের মধ্যে অনুভূমিকভাবে কেন্দ্রে রাখতে ব্যবহৃত হয়।

স্বয়ংক্রিয় মান আপনার সংজ্ঞায়িত মানের উপর ভিত্তি করে একটি অভ্যন্তরীণ উপাদানকে একটি নির্দিষ্ট প্রস্থ গ্রহণ করবে, তারপর অবশিষ্ট স্থানটি বাম এবং ডান মার্জিনের মধ্যে ভাগ করা হবে৷

ধরা যাক যে আপনি 500px প্রস্থের একটি বক্সের ভিতরে 250px প্রস্থের একটি বক্স তৈরি করেছেন। যদি আপনি একটি মার্জিন তৈরি করতে স্বয়ংক্রিয় কীওয়ার্ড ব্যবহার করেন, একটি 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;
}

আমাদের কোড ফিরে আসে:

আপনি দেখতে পাচ্ছেন, আমাদের অভ্যন্তরীণ বাক্সের বাম এবং ডান উভয় দিকে একটি সমান মার্জিন তৈরি করা হয়েছে (একটি লাল সীমানা সহ)। অন্য কথায়, আমাদের ভিতরের বাক্সটি অনুভূমিকভাবে কেন্দ্রীভূত। এর কারণ হল আমরা আমাদের ভিতরের বাক্সের জন্য আমাদের মার্জিন নির্দিষ্ট করতে মার্জিন:স্বয়ংক্রিয় মান ব্যবহার করেছি৷

আমাদের অভ্যন্তরীণ বাক্সের উপরের বা নীচের প্রান্তে কোনও মার্জিন নেই, কারণ আমরা আমাদের উদাহরণের জন্য কোনও নির্দিষ্ট করিনি৷

উপসংহার

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

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