সিএসএস বক্স মডেল বোঝা

একটি HTML নথির প্রতিটি উপাদান CSS দ্বারা একটি আয়তক্ষেত্রাকার বাক্স হিসাবে বিবেচিত হয়৷ এটি ডিফল্ট লেআউট স্কিম এবং আমাদের প্রয়োজনীয়তা অনুযায়ী কাস্টমাইজ করা যেতে পারে। উপাদানগুলির অবস্থান, তাদের বিষয়বস্তু এবং তাদের আশেপাশের উপাদানগুলি CSS-এর বক্স মডেল অনুসরণ করে করা হয়৷

শুরু করতে, নিচের ছবিতে দেখানো বক্স মডেলের লেআউট দিয়ে শুরু করা যাক।

উৎস:w3.org

সামগ্রী

এটি পাঠ্য, চিত্র বা অন্যান্য মিডিয়া সামগ্রীর আকারে প্রকৃত ডেটা অন্তর্ভুক্ত করে। প্রস্থ এবং উচ্চতা বৈশিষ্ট্য এই বাক্সের মাত্রা পরিবর্তন করে।

প্যাডিং

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

সীমান্ত

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

মার্জিন

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

উদাহরণ

নিম্নলিখিত উদাহরণটি বিবেচনা করুন -

কন্টেন্ট ডেমো বক্স

আউটপুট

এটি নিম্নলিখিত আউটপুট −

এখানে, আমরা CSS স্পেসিফিকেশনে

প্রস্থ + (বাম+ডান) প্যাডিং + (বাম+ডান) বর্ডার + (বাম+ডান) মার্জিন =200 + (35+35) + (20+20) + (25+25) px=360px 

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

 নিম্নলিখিত উদাহরণগুলি CSS বক্স মডেল -
কে চিত্রিত করে 


 
আউটপুট
 

 এটি নিম্নলিখিত আউটপুট দেয়
 
 
 
উদাহরণ
 


 
আউটপুট
 

 এটি নিম্নলিখিত আউটপুট দেয় -