CSS-এ, Box Model একটি উপাদান কীভাবে গঠন করা হয় এবং ওয়েবপেজে অবস্থান করা হয় তা নির্ধারণ করার জন্য এটি একটি গুরুত্বপূর্ণ ধারণা। এটি মৌলিক উপাদান যেমন বিষয়বস্তু, Padding, Border এবং Margin.
Content
Content এমন একটি এলাকা যেখানে উপাদানের প্রকৃত বিষয়বস্তু রয়েছে, যেমন পাঠ্য, ছবি বা ভিডিও।
বিষয়বস্তুর আকার নির্ধারণ করতে, আমরা width এবং height বৈশিষ্ট্যগুলি ব্যবহার করি।
Padding
Padding বিষয়বস্তুর চারপাশের স্থান, বিষয়বস্তু এবং উপাদানের মধ্যে একটি ফাঁক তৈরি করে border ।
padding মান নির্দিষ্ট করতে, আমরা padding-top, padding-right,padding-bottom এবং বৈশিষ্ট্য ব্যবহার করি। padding-left
Border
এটি Border উপাদানের চারপাশের রূপরেখা, যা বিষয়বস্তু এবং পার্শ্ববর্তী এলাকার মধ্যে একটি স্পষ্ট সীমানা তৈরি করে।
ফর্ম্যাট করতে border, আমরা border-width, border-style, এবং border-color বৈশিষ্ট্যগুলি ব্যবহার করি।
Margin
Margin উপাদানের বাইরের স্থান border, অন্যান্য উপাদানের মধ্যে একটি ফাঁক তৈরি করে।
মান সংজ্ঞায়িত করতে margin, আমরা margin-top, margin-right, এবং বৈশিষ্ট্য ব্যবহার করি। margin-bottom margin-left
ইন সিএসএস ব্যবহার করে Box Model, আমরা একটি উপাদানের উপাদানের মান পরিবর্তন করে আকার এবং অবস্থান কাস্টমাইজ করতে পারি।
উদাহরণ:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
উপরের উদাহরণে, ক্লাস সহ উপাদানটির .box প্রস্থ 200px এবং উচ্চতা 100px রয়েছে। এটির একটি 20px padding, একটি কালো border যার পুরুত্ব 1px এবং একটি 10px margin ।
এই মানগুলি সামঞ্জস্য করে, আপনি আপনার ওয়েবপৃষ্ঠায় বিভিন্ন আকার এবং ব্যবধান সহ উপাদান তৈরি করতে পারেন। ব্যবহারের মাধ্যমে Box Model, আপনার ইন্টারফেসের মধ্যে উপাদানগুলির অবস্থান, আকার এবং ব্যবধানের উপর আপনার নিয়ন্ত্রণ রয়েছে।