সিএসএস বক্স মডেল:একটি কিভাবে করতে হবে নির্দেশিকা

একটি ওয়েব পৃষ্ঠায় একটি উপাদান কীভাবে উপস্থিত হবে তা নির্ধারণ করতে ব্রাউজারটি CSS বক্স মডেল ব্যবহার করে। বক্স মডেল একটি উপাদানের আকার এবং এর সীমানা, প্যাডিং এবং মার্জিন উপস্থাপন করে। আপনি এই উপাদানগুলির প্রতিটিকে পৃথকভাবে স্টাইল করতে পারেন৷৷

প্রতিটি উপাদান একটি বাক্স দ্বারা বেষ্টিত হয়. এই বাক্সগুলি কীভাবে কাজ করে তা বুঝতে সক্ষম হওয়া একটি ওয়েব পৃষ্ঠায় আপনি যেভাবে চান সেইভাবে আইটেমগুলির অবস্থান নির্ধারণের একটি অপরিহার্য অংশ৷

সিএসএস বক্স মডেলটি একটি ওয়েব পৃষ্ঠায় একটি বক্স কীভাবে উপস্থিত হওয়া উচিত এবং এটি কীভাবে অবস্থান করা উচিত তা নির্ধারণ করতে ব্যবহৃত হয়। এই মডেলটি চারটি উপাদানকে বোঝায়- বিষয়বস্তু, প্যাডিং, বর্ডার এবং মার্জিন- যা CSS-এ একটি বাক্স তৈরি করে। এই টিউটোরিয়ালটি CSS বক্স মডেলের মৌলিক বিষয় এবং এর প্রধান অংশ নিয়ে আলোচনা করবে।

CSS বক্স মডেল

CSS বক্স মডেল হল CSS-এর সমস্ত বক্সে প্রয়োগ করা কাঠামো। এই বক্স মডেল ব্রাউজারকে নির্দেশ দেয় কিভাবে একটি বাক্সের বিভিন্ন অংশ একটি উপাদান তৈরি করে যা ওয়েব পৃষ্ঠায় প্রদর্শিত হবে। বক্স মডেল একটি বাক্সের বিষয়বস্তু, প্যাডিং, সীমানা এবং মার্জিন উপস্থাপন করে।

আসুন বক্স মডেলের প্রতিটি উপাদানের দিকে তাকাই:

কন্টেন্ট। বাক্সের বিষয়বস্তু, যেখানে পাঠ্য, ফর্ম, ছবি এবং অন্যান্য ওয়েব উপাদান উপস্থিত হবে৷
প্যাডিং। একটি বাক্সের বিষয়বস্তু এবং বাক্সের সীমানার মধ্যবর্তী স্থান। একটি বাক্সের প্যাডিং স্বচ্ছ।
সীমান্ত। সীমানা যা একটি বাক্সের বিষয়বস্তুর চারপাশে যায়, অথবা একটি বাক্সের প্যাডিংয়ের চারপাশে যদি একটি প্যাডিং মান নির্দিষ্ট করা থাকে।
মার্জিন। একটি সীমানার বাইরের প্রান্ত এবং একটি ওয়েব পৃষ্ঠার অন্যান্য উপাদানগুলির মধ্যে স্থান৷ একটি বাক্সের প্যাডিং স্বচ্ছ।

আসুন এই উপাদানগুলির প্রতিটি নিয়ে আলোচনা করি এবং কীভাবে সেগুলি একে একে ব্যবহার করতে হয়।

কন্টেন্ট এরিয়া

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

ডিফল্টরূপে, একটি বিষয়বস্তুর এলাকার আকার তার উপাদানগুলির আকারের সমান হবে। আপনার যদি পাঠ্যের একটি লাইন থাকে তবে বাক্সটি পাঠ্যের লাইনের মতো লম্বা এবং লম্বা হবে।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

ধরুন আমরা 200px লম্বা এবং 200px চওড়া একটি বক্স ডিজাইন করতে চাই। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

<html>


<p>This is a box.</p>

</html>

<style>

p {
	height: 200px;
	width: 200px;
}
</style>

সিএসএস বক্স মডেল:একটি কিভাবে করতে হবে নির্দেশিকা আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

আমরা পাঠ্যের একটি অনুচ্ছেদ তৈরি করতে একটি HTML

ট্যাগ ব্যবহার করেছি। মনে রাখবেন, ওয়েব ডিজাইনের প্রতিটি উপাদান একটি বাক্সে থাকে, তাই বক্স মডেলটি আমাদের

ট্যাগে প্রযোজ্য হবে। আমাদের CSS কোডে, আমরা একটি নিয়ম তৈরি করি যা সমস্ত

ট্যাগের উচ্চতা 200px এ সেট করে। এছাড়াও আমরা সমস্ত

ট্যাগের প্রস্থ 200px এ সেট করেছি।

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

প্যাডিং এরিয়া

প্যাডিং এলাকা বিষয়বস্তু এলাকা প্রসারিত. এটি একটি বাক্সের বিষয়বস্তু এবং এর সীমানার মধ্যে একটি ফাঁক তৈরি করে। প্যাডিং প্রায়ই একটি ওয়েব পৃষ্ঠায় ব্যানার এবং অন্যান্য ঘোষণা উপাদান তৈরি করতে ব্যবহৃত হয়৷

একটি বাক্সে প্যাডিং প্রয়োগ করতে, আমরা CSS প্যাডিং বৈশিষ্ট্য ব্যবহার করতে পারি। ধরুন আমরা আমাদের শেষ বাক্সের চারপাশে একটি 25px প্যাডিং প্রয়োগ করতে চাই। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

<html>


<p>This is a box.</p>
</html>

<style>

p {
	height: 200px;
	width: 200px;
	padding: 20px;
}
</style>

আমরা "প্যাডিং" বৈশিষ্ট্য নির্দিষ্ট করেছি এবং এর মান 20px সেট করেছি। এটি আমাদের বক্সের বিষয়বস্তু এলাকা এবং আমাদের বক্সের সীমানার মধ্যে একটি 20px ব্যবধান তৈরি করে৷

এখন আমাদের বাক্স এবং পৃষ্ঠার প্রান্তের মধ্যে একটি ব্যবধান রয়েছে৷

সীমান্ত এলাকা

সীমান্ত এলাকা যেখানে একটি বাক্সের জন্য সীমানা প্রদর্শিত হবে। সীমানা যে কোনো প্যাডিংয়ের বাইরে রঙিন রূপরেখা। বর্ডার স্টাইল করার জন্য আপনি যেকোনো রঙ ব্যবহার করতে পারেন। সীমানাগুলির জন্যও অনেকগুলি অন্তর্নির্মিত নকশা রয়েছে৷

ধরুন আমরা আমাদের বক্সের চারপাশে একটি 5px-চওড়া হালকা নীল বর্ডার যোগ করতে চাই। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

<html>


<p>This is a box.</p>
</html>

<style>

p {
	height: 200px;
	width: 200px;
	padding: 20px;
	border: 5px solid lightblue;
}
</style>

আমরা একটি 5px-প্রশস্ত হালকা নীল সীমানা নির্ধারণ করতে CSS "বর্ডার" বৈশিষ্ট্য ব্যবহার করি। এই সীমানা "কঠিন" শৈলী ব্যবহার করে, যা একটি একক-লাইন সীমানা তৈরি করে। লক্ষ্য করুন যে আমাদের সীমানা আমাদের বাক্সের বিষয়বস্তু থেকে আলাদা করা হয়েছে। এটি কারণ আমরা আমাদের বাক্সের চারপাশে একটি 20px প্যাডিং নির্দিষ্ট করেছি৷

৷

মার্জিন এলাকা

মার্জিন এলাকাটি বক্স মডেলের সবচেয়ে বাইরের স্তর। এই এলাকাটি একটি খালি ফাঁক তৈরি করে যা একটি উপাদানকে ওয়েব পৃষ্ঠার অন্যান্য উপাদান থেকে আলাদা করে।

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

<html>


<p>This is a box.</p>
<p>This is another box.</p>

</html>
<style>

p {
	height: 200px;
	width: 200px;
	padding: 20px;
	border: 5px solid lightblue;
	margin: 10px;
}
</style>

এইবার, আমরা আমাদের HTML ফাইলে দুটি বাক্স নির্দিষ্ট করেছি। তারপর, আমরা “মার্জিন” প্রপার্টি ব্যবহার করে আমাদের বক্সে 10px মার্জিন প্রয়োগ করেছি।

আপনি দেখতে পাচ্ছেন, এখন আমাদের বাক্সগুলির মধ্যে একটি 10px ব্যবধান রয়েছে। আমরা আমাদের বাক্সে একটি মার্জিন প্রয়োগ করার কারণে এটি। এটি আমাদের বাক্সগুলির সীমানা এবং একটি ওয়েব পৃষ্ঠার অন্যান্য উপাদানগুলির মধ্যে একটি ফাঁক তৈরি করে৷

৷

মার্জিন এলাকা সম্পর্কে আরও জানতে, CSS মার্জিনের উপর আমাদের টিউটোরিয়াল পড়ুন।

প্রস্থ এবং উচ্চতা গণনা

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

উচ্চতা এবং প্রস্থ বৈশিষ্ট্যগুলি আপনাকে সামগ্রী এলাকার উচ্চতা এবং প্রস্থ সেট করতে দেয় একটি ওয়েব উপাদানের। এটি ওয়েব পৃষ্ঠার অন্যান্য উপাদানগুলির জন্য হিসাব করে না৷

৷

যদি আমরা জানতে চাই যে আগের থেকে আমাদের সম্পূর্ণ বাক্সের উদাহরণটি কতটা জায়গা নেয়, আমাদের একটি দ্রুত গণনা চালাতে হবে। পূর্ববর্তী বিভাগ থেকে আমরা আমাদের "মার্জিন এলাকা" উদাহরণে যে মানগুলি নির্দিষ্ট করেছি তা এখানে:

উচ্চতা:200px
প্রস্থ:200px
প্যাডিং:20px
মার্জিন:10px
সীমানা:5px

প্রস্থ গণনা করতে, আমরা নিম্নলিখিত সূত্রটি ব্যবহার করতে পারি:

200px (প্রস্থ) +
40px (বাম এবং ডান প্যাডিং) +
10px (বাম এবং ডান সীমানা) +
20px (বাম এবং ডান মার্জিন)

এটি আমাদেরকে মোট 270px ছেড়ে দেয় .

উচ্চতা গণনা করতে, আমরা বাক্সের উচ্চতা ব্যবহার করব। আমরা প্যাডিং, সীমানা এবং মার্জিনের জন্য উপরের এবং নীচের মানগুলিও ব্যবহার করব৷

উপসংহার

CSS বক্স মডেল হল একটি ওয়েব পৃষ্ঠায় একটি উপাদান রেন্ডার করতে ব্যবহৃত কাঠামো। HTML এর প্রতিটি উপাদান একটি আয়তক্ষেত্রাকার বক্স। বক্স মডেলটি একটি বাক্সের জন্য বিষয়বস্তু, প্যাডিং, সীমানা এবং মার্জিনগুলি কীভাবে উপস্থিত হয় তা সংজ্ঞায়িত করে৷

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