HTML ডকুমেন্টের প্রতিটি এলিমেন্ট ব্রাউজার দ্বারা একটি আয়তাকার বক্স হিসেবে রেন্ডার হয়। প্রস্থ, উচ্চতা, প্যাডিং এবং মার্জিন এলিমেন্টের চারপাশে এবং ভিতরে স্পেস নির্ধারণ করে। নিচের ডায়াগ্রাম বক্স মডেল কনসেপ্ট ব্যাখ্যা করে:
স্রোত: w3.org
কন্টেন্ট (Content)
এতে প্রকৃত ডেটা থাকে - টেক্সট, ইমেজ বা অন্যান্য মিডিয়া কন্টেন্ট। width এবং height প্রপার্টি এই বক্সের ডাইমেনশন মডিফাই করে।
প্যাডিং (Padding)
কন্টেন্টের বাহিরের প্রান্ত এবং এর বর্ডারের মাঝখানের স্পেসকে প্যাডিং বলা হয়। এই বক্সটি padding প্রপার্টি দিয়ে রিসাইজ করা যায়। প্রান্ত-নির্দিষ্ট প্রপার্টি যেন padding-left, padding-bottom ইত্যাদি কাস্টম স্পেসিং অর্জনে সাহায্য করে।
বর্ডার (Border)
প্যাডিং বাহিরের প্রান্ত এবং মার্জিনের ভিতরের প্রান্তের দূরতাই একটি এলিমেন্টের বর্ডার নির্ধারণ করে। ডিফল্টভাবে এর প্রস্থ ০ সেট করা থাকে। border প্রপার্টি এলিমেন্টের বর্ডার ডিফাইন করতে ব্যবহৃত হয়। পৃথক প্রান্তগুলোও স্টাইল করা যায়।
মার্জিন (Margin)
একটি এলিমেন্টের বক্স এবং এর সার라운드িং এলিমেন্টের বক্সের মাঝখানের স্পেসকে মার্জিন বলা হয়। এটি পেজ মার্জিনের সমান যা পেজের প্রান্ত এবং কন্টেন্টের মাঝখানের স্পেস। এটি ট্রান্সপেরেন্ট রঙের, প্যাডিং-এর বৈশিষ্ট্য অনুকরণ করে, সिवা এরা এলিমেন্টের বর্ডারের বাইরের এলাকা ক্লিয়ার করে। প্যাডিং-এর মতই পৃথক প্রান্তের জন্য কাস্টম মার্জিন ডিফাইন করা যায়।
উদাহরণ
<!DOCTYPE html> <html> <head> <style> body * { outline: solid; } #demo { margin: auto; width: 50%; padding: 1em; border: 1px outset; display: flex; box-shadow: inset 0 0 15px mediumvioletred; box-sizing: border-box; } #demo div { padding: 2em; box-shadow: inset 0 0 9px orange; } </style> </head> <body> <div id="demo"> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> body * { outline: thin dotted; } #demo { margin: auto; width: 120px; height: 120px; padding: 1em; border: 1px outset; display: flex; box-shadow: inset 0 0 15px indianred; } #demo div { width: 40px; height: 40px; } div:nth-child(odd) { border: inset lightgreen; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px; } div:nth-child(even) { border: inset lightblue; padding: 0.5em; } </style> </head> <body> <div id="demo"> <div></div> <div></div> <div></div> </div> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
