HTML ডকুমেন্টের প্রতিটি এলিমেন্টকে CSS একটি আয়তাকার বক্স হিসেবে বিবেচনা করে। এটি ডিফল্ট লে আউট স্কিম এবং আমাদের প্রয়োজন অনুযায়ী কাস্টমাইজ করা যায়। এলিমেন্টের পজিশনিং, তাদের কন্টেন্ট এবং পরিবর্তী এলিমেন্টগুলো CSS বক্স মডেল অনুসরণ করে করা হয়।
শুরুতে, নিচের ছবিতে দেখানো বক্স মডেলের লে আউট নিয়ে আলোচনা করি।
সোর্স: w3.org
কন্টেন্ট (Content)
এতে টেক্সট, ইমেজ বা অন্যান্য মিডিয়া কন্টেন্ট হিসেবে প্রকৃত ডেটা থাকে। width এবং height প্রপার্টি এই বক্সের ডাইমেনশন পরিবর্তন করে।
প্যাডিং (Padding)
কন্টেন্টের বাইরের এজ এবং এর বর্ডারের মধ্যবর্তী স্পেসকে প্যাডিং বলা হয়। এই বক্সটি padding প্রপার্টি দ্বারা রিসাইজ করা যায়। এজ-স্পেসিফিক প্রপার্টি যেমন padding-left, padding-bottom ইত্যাদি কাস্টম স্পেসিং অর্জনে সাহায্য করে।
বর্ডার (Border)
প্যাডিংের বাইরের এজ এবং মার্জিনের ভিতরের এজের মধ্যবর্তী দূরত্ব একটি এলিমেন্টের বর্ডার সংজ্ঞায়িত করে। ডিফল্টরূপে এর প্রস্থ 0 সেট থাকে। border প্রপার্টি একটি এলিমেন্টের বর্ডার সংজ্ঞায়িত করতে ব্যবহৃত হয়। পৃথক এজগুলোকেও স্টাইল করা যায়।
মার্জিন (Margin)
একটি এলিমেন্টের বক্স এবং এর পরিবর্তী এলিমেন্টগুলোর বক্সের মধ্যবর্তী স্পেসকে মার্জিন বলা হয়। এটি পেজ মার্জিনের সদৃশ যা পেজের এজ এবং এর কন্টেন্টের মধ্যবর্তী স্পেস হিসেবে সংজ্ঞায়িত। এটি ট্রান্সপারেন্ট রঙের, প্যাডিং-এর sifat অনুকরণ করে, বস্তুত এটি এলিমেন্টের বর্ডারের বাইরের এলাকা খালি রাখে। প্যাডিং-এর মতো পৃথক এজগুলোর জন্য কাস্টম মার্জিন সংজ্ঞায়িত করা যায়।
উদাহরণ
নিচের উদাহরণটি বিবেচনা করুন:
<!DOCTYPE html> <html> <head> <style> div { margin: 25px; padding: 35px; width: 200px; background-color: lightseagreen; border: 20px dashed indianred; } </style> </head> <body> <div> Content demo box<br/> </div> </body> </html>
আউটপুট
এটি নিচের আউটপুট তৈরি করে:
এখানে, আমরা CSS স্পেসিফিকেশনে <div> এলিমেন্টের আকার সংজ্ঞায়িত করেছি। এই এলিমেন্টের মোট প্রস্থ 360px যা নিচের রূপে হিসাব করা হয়:
width + (left+right)padding + (left+right)border + (left+right)margin = 200 + (35+35) + (20+20) + (25+25) px = 360px
যদিও মনে হতে পারে মার্জিন এবং প্যাডিং শুধু অতিরিক্ত স্পেস যোগ করে এবং এলিমেন্টের মোট প্রস্থ বাড়ায়, কিন্তু এটি ওয়েবপেজকে রেসপন্সিভ বানাতে বিভিন্ন অ্যাপ্লিকেশন খুঁজে পেয়েছে। বক্স মডেল এলিমেন্টগুলকে ভালোভাবে পজিশন করতে সাহায্য করে।
আরেকটি উদাহরণ
নিচের উদাহরণগুলো CSS বক্স মডেল উদাহরণ দেয়:
<!DOCTYPE html> <html> <head> <style> div { margin: auto; padding: 35px; width: 80px; box-shadow: inset 0 0 22px indianred; border-radius: 50%; } div > div { padding: 0 0px 100px 0px; border-radius: 3%; box-shadow: inset 0 0 22px seagreen; } </style> </head> <body> <div> <div></div> </div> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেয়:
আরেকটি উদাহরণ
<!DOCTYPE html> <html> <head> <style> #demo { width: 350px; display: flex; float: left; border: 6px solid black; border-radius: 6%; } .d1 { margin-left: 20px; width: 150px; height: 80px; box-shadow: 0 0 0 4px mediumslateblue; box-sizing: border-box; border-radius: 36%; } .d2 { width: 150px; height: 80px; padding: 30px; box-shadow: 0 0 0 4px darkred; box-sizing: border-box; border-radius: 36%; } </style> </head> <body> <div id="demo"> <div class="d1"></div> <div class="d2"></div> </div> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেয়:
