এইচটিএমএল এলিমেন্ট গুলোকে একটি বক্স হিসেবে ধরে নিলে, ওয়েব পেজ ডিজাইনে বিশেষ সুবিধা পাওয়া যায়। বিশেষ করে কোন ওয়েব পেজের লেআউট ডিজাইন করতে এটা বেশ সুবিধাজনক একটি পদ্ধতি।
বক্স মডেল
সিএসএস বক্স মডেল হল এইচটিএমএল এলিমেন্টের চারপাশের বর্ডার, মার্জিন, প্যাডিং এবং এলিমেন্ট বা কন্টেন্ট এর সম্মিলিত অবস্থা। বক্স মডেল প্রপার্টিগুলো কোন কন্টেন্ট এর চারপাশে বর্ডার, মার্জিন, প্যাডিং বা আউটলাইন নির্ধারণ করে।
উদাহরনঃ
বক্স মডেলের বিভিন্ন অংশের বর্ণনা -
- Margin - বর্ডারের চারপাশের ফাকা স্থান নির্ধারণ করাই হল মার্জিন। মার্জিনের পৃষ্ঠদেশ বা background এ কোন রঙ ব্যবহার করা যায় না, এটা পুরোপুরি transparent বা স্বচ্
- Border - কন্টেন্ট প্যাডিং এর চারপাশে অর্থাৎ মার্জিন এবং প্যাডিং এর মধ্যস্থানেই বর্ডার অবস্থান করে। পৃষ্ঠদেশ বা background এর রং, বর্ডার এর উপর প্রভাব বিস্তার করে।
- Padding - কন্টেন্ট এর চারপাশের ফাকা স্থান নির্ধারণ করা হয় প্যাডিং ব্যবহার করে। প্যাডিং পৃষ্ঠদেশ বা background এ কোন রঙ ব্যবহার করা যায় না, এটা পুরোপুরি transparent বা স্বচ্ছ
- Content - বক্স মডেলের কোন কন্টেন্ট হল টেক্সট, ছবি ইত্যাদি, অর্থাৎ যেগুলো ওয়েব পেজে প্রদর্শিত হয়
উদাহরণ
div {
width: 400px;
border: 5px dotted tomato;
padding: 40px;
margin: 30px;
}
