সি এস এস বক্স মডেল (CSS Box Model)

সব HTML উপাদানগুলোকে বক্স হিসাবে বিবেচনা করা যেতে পারে । CSS এ “ বক্স মডেল” শব্দটি ব্যবহার করা হয় যখন নকশা এবং বিন্যাস নিয়ে আলোচনা করা হয়।

সিএসএস বক্স মডেল মূলত চারপাশে HTML উপাদানে ঘেরা একটি বক্স, এবং এতে রয়েছে মার্জিন, সীমানা, প্যাডিং, এবং প্রকৃত বিষয়বস্তু।

বক্স মডেল আমাদেরকে উপাদানের কাছাকাছি একটি সীমানা, এবং উপাদানের মধ্যে স্থান নির্ধারণ করতে দেয়।
নীচের ইমেজটি বক্স মডেল প্রকাশ করেঃ

বিভিন্ন অংশের ব্যাখ্যাঃ

• বিষয়বস্তু – বক্সের বিষয়বস্তু, যেখানে টেক্সট এবং ইমেজ থাকে
• প্যাডিং – বিষয়বস্তুর আশেপাশের এলাকা পরিস্কার করে। প্যাডিং সচ্ছ হয়
• সীমানা – সীমানা হলো সেটা যেটা বিষয়বস্তু এবং প্যাডিং কে চারপাশ থেকে ঘিরে রাখে
• মার্জিন – সীমানার চারপাশের এলাকা পরিস্কার করে। মার্জিন সচ্ছ

উদাহরণ

div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}

উপদানের প্রস্থ এবং উচ্চতা

সব ব্রাউজারে একটি উপদানের পস্থ এবং উচ্চতা সঠিকভাবে সেট করার জন্য, কিভাবে বক্স মডেল কাজ করে সেটা জানতে হবে।

গুরুত্বপূর্ণঃ আপনি যখন CSS দিয়ে একটি উপদানের প্রস্থ এবং উচ্চতা সেট করবেন, আপনাকে শুধু বিষয়বস্তুর এলাকার প্রস্থ এবং উচ্চতা সেট করতে হবে। উপদানের সম্পূর্ণ আকার পরিমাপের জন্য, আপনাকে পাডিং, সীমানা এবং মার্জিনও যোগ করতে হবে।

মোট 350px প্রস্থের একটি <div>  উপাদানের স্টাইল করা যাকঃ

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

চলো অংকটা করা যাকঃ

ব্রাউজার সামঞ্জস্যের ইস্যু

ইন্টারনেট এক্সপ্লোরার ৮ এবং তার আগের সংস্করণে প্রস্থ প্রপার্টিতে প্যাডিং এবং সীমানা যোগ করতে হয়।

এই সমস্যা দূর করার জন্য, HTML পেইজে < !DOCTYPE html> যোগ করতে হয়।