একটি HTML নথির প্রতিটি উপাদান ব্রাউজার দ্বারা একটি আয়তক্ষেত্রাকার বক্স হিসাবে রেন্ডার করা হয়৷ প্রস্থ, উচ্চতা, প্যাডিং এবং মার্জিন উপাদানের চারপাশে বরাদ্দ করা স্থান নির্ধারণ করে। নিচের চিত্রটি বক্স মডেল ধারণাটি ব্যাখ্যা করে −
উৎস:w3.org
সামগ্রী
এটি পাঠ্য, চিত্র বা অন্যান্য মিডিয়া সামগ্রীর আকারে প্রকৃত ডেটা অন্তর্ভুক্ত করে। প্রস্থ এবং উচ্চতা বৈশিষ্ট্য এই বাক্সের মাত্রা পরিবর্তন করে।
প্যাডিং
বিষয়বস্তুর বাইরের প্রান্ত এবং এর সীমানার মধ্যবর্তী স্থানটি প্যাডিংকে বোঝায়। প্যাডিং বৈশিষ্ট্য দ্বারা এই বাক্সের আকার পরিবর্তন করা যেতে পারে। প্রান্ত-নির্দিষ্ট বৈশিষ্ট্য যেমন প্যাডিং-বাম, প্যাডিং-বটম, ইত্যাদি কাস্টম ব্যবধান অর্জনে সহায়তা করে।
সীমান্ত
প্যাডিংয়ের বাইরের প্রান্ত এবং মার্জিনের ভিতরের প্রান্তের মধ্যে দূরত্ব একটি উপাদানের সীমানা নির্ধারণ করে। ডিফল্টরূপে, এর প্রস্থ 0 এ সেট করা হয়। বর্ডার প্রপার্টি একটি উপাদানের সীমানা নির্ধারণ করতে ব্যবহৃত হয়। পৃথক প্রান্তগুলিও স্টাইল করা যেতে পারে।
মার্জিন
একটি উপাদানের বাক্স এবং এর আশেপাশের উপাদানগুলির বাক্সের মধ্যে স্থানটিকে মার্জিন হিসাবে সংজ্ঞায়িত করা হয়। এটি পৃষ্ঠা মার্জিনের সাথে সাদৃশ্যপূর্ণ যা একটি পৃষ্ঠার প্রান্ত এবং এর বিষয়বস্তুর মধ্যে স্থান হিসাবে সংজ্ঞায়িত করা হয়। এটি রঙে স্বচ্ছ, প্যাডিংয়ের বৈশিষ্ট্যগুলি অনুকরণ করে, তবে এটি উপাদানের সীমানার বাইরের এলাকা পরিষ্কার করে। প্যাডিংয়ের মতো, পৃথক প্রান্তগুলিকে একটি কাস্টম মার্জিনের জন্য সংজ্ঞায়িত করা যেতে পারে।
উদাহরণ
<!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> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
