সিএসএস পডকাস্ট - ০০১: বক্স মডেল
ধরুন আপনার কাছে এই HTML কোডটি আছে:
<p>I am a paragraph of text that has a few words in it.</p>
তারপর আপনি এর জন্য এই CSS লিখবেন:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
আপনার নির্দিষ্ট করা ১০০ পিক্সেলের পরিবর্তে কন্টেন্টটি ১৪২ পিক্সেল চওড়া হয়ে যাচ্ছে এবং এটি আপনার এলিমেন্টের বাইরে চলে যাচ্ছে। এমনটা কেন হচ্ছে?
বক্স মডেল হলো CSS-এর একটি মূল ভিত্তি। বক্স মডেল কীভাবে কাজ করে, CSS-এর অন্যান্য দিক দ্বারা এটি কীভাবে প্রভাবিত হয়, এবং সবচেয়ে গুরুত্বপূর্ণভাবে, আপনি কীভাবে এটিকে নিয়ন্ত্রণ করতে পারেন—এই বিষয়গুলো বুঝতে পারলে আপনি আরও অনুমানযোগ্য CSS লিখতে পারবেন।
এটা মনে রাখা গুরুত্বপূর্ণ যে CSS দ্বারা প্রদর্শিত সবকিছুই একটি বক্স, এমনকি যদি তা শুধু কিছু টেক্সট হয়, বা এর এমন একটি border-radius থাকে যা এটিকে বৃত্তের মতো দেখায়।
বিষয়বস্তু এবং আকার
বক্সগুলোর আচরণ তাদের display মান, নির্ধারিত মাত্রা এবং ভেতরের বিষয়বস্তুর ওপর ভিত্তি করে ভিন্ন ভিন্ন হয়। এই বিষয়বস্তু সাধারণ টেক্সট হতে পারে, অথবা চাইল্ড এলিমেন্ট দ্বারা তৈরি আরও বক্স হতে পারে। উভয় ক্ষেত্রেই, বিষয়বস্তুটি ডিফল্টভাবে বক্সের আকারকে প্রভাবিত করে।
আপনি এক্সট্রিনসিক সাইজিং ব্যবহার করে এটি নিয়ন্ত্রণ করতে পারেন, অথবা ইনট্রিনসিক সাইজিং ব্যবহার করে কন্টেন্টের আকারের উপর ভিত্তি করে ব্রাউজারকে আপনার জন্য সিদ্ধান্ত নিতে দিতে পারেন।
এখানে একটি সাধারণ ডেমো দেওয়া হলো যা পার্থক্যটি ব্যাখ্যা করে:
ডেমোটিতে একটি নির্দিষ্ট মাপ ও মোটা বর্ডারযুক্ত বক্সের মধ্যে "CSS is awesome" কথাগুলো রয়েছে। যেহেতু বক্সটির একটি নির্দিষ্ট প্রস্থ আছে, তাই এটি এক্সট্রিনসিক্যালি সাইজড। এর মানে হলো, এটি তার চাইল্ড কন্টেন্টের সাইজিং নিয়ন্ত্রণ করে। তবে, "awesome" শব্দটি বক্সটির জন্য বেশ বড়, তাই এটি প্যারেন্ট বক্সের বর্ডার বক্সের বাইরে উপচে পড়ে (এ বিষয়ে পরে আরও আলোচনা করা হবে)। এই উপচে পড়া রোধ করার একটি উপায় হলো বক্সটিকে ইন্ট্রিনসিক্যালি সাইজড হতে দেওয়া, হয় এর প্রস্থ নির্ধারণ না করে, অথবা এই ক্ষেত্রে, width min-content এ সেট করে। min-content কীওয়ার্ডটি বক্সকে বলে দেয় যে এটি যেন শুধুমাত্র তার কন্টেন্টের ("awesome" শব্দটি) ইন্ট্রিনসিক সর্বনিম্ন প্রস্থের সমান চওড়া হয়। এর ফলে বক্সটি টেক্সটটির চারপাশে নিখুঁতভাবে ফিট হয়ে যায়।
এখানে একটি আরও জটিল উদাহরণ দেওয়া হলো যা বাস্তব কন্টেন্টের উপর বিভিন্ন আকারের প্রভাব দেখায়:
এক্সট্রিনসিক সাইজিং কীভাবে আপনাকে আরও বেশি নিয়ন্ত্রণ দেয় এবং ইন্ট্রিনসিক সাইজিং কীভাবে কন্টেন্টের উপর আরও বেশি নিয়ন্ত্রণ দেয়, তা দেখতে ইন্ট্রিনসিক সাইজিং চালু এবং বন্ধ করুন। এর প্রভাব দেখতে কার্ডটিতে কয়েকটি বাক্য যোগ করুন। যখন এই এলিমেন্টটিতে এক্সট্রিনসিক সাইজিং থাকে, তখন ওভারফ্লো হওয়ার আগে আপনি কতটুকু কন্টেন্ট যোগ করতে পারবেন তার একটি সীমা থাকে, কিন্তু ইন্ট্রিনসিক সাইজিং চালু থাকলে এমনটা হয় না।
ডিফল্টরূপে, এই এলিমেন্টটির width এবং height প্রতিটি 400px করে নির্ধারিত থাকে। এই মাপগুলো এলিমেন্টের ভেতরের সবকিছুকে একটি কঠোর সীমানা দেয়, যা ততক্ষণ পর্যন্ত মেনে চলা হয় যতক্ষণ না ভেতরের কন্টেন্ট বক্সটির জন্য খুব বড় হয়ে যায়। ফুলের ছবির নিচের ক্যাপশনটি পরিবর্তন করে বক্সটির উচ্চতাকে ছাড়িয়ে যায় এমন কিছু দিলেই আপনি এর কার্যকারিতা দেখতে পাবেন।
মূল পরিভাষা: কোনো কন্টেন্ট যখন তার নির্দিষ্ট বক্সের জন্য খুব বড় হয়ে যায়, তখন ওভারফ্লো ঘটে। আপনি overflow প্রপার্টি ব্যবহার করে একটি এলিমেন্ট কীভাবে ওভারফ্লো কন্টেন্ট সামলাবে তা নিয়ন্ত্রণ করতে পারেন।
ইন্ট্রিনসিক সাইজিং-এ স্যুইচ করলে ব্রাউজার বক্সের কন্টেন্ট সাইজের উপর ভিত্তি করে আপনার জন্য সিদ্ধান্ত নিতে পারে। এতে ওভারফ্লো হওয়ার সম্ভাবনা অনেক কমে যায়, কারণ বক্সটি তার কন্টেন্টের সাথে সাথে রিসাইজ হয়।
এটা মনে রাখা গুরুত্বপূর্ণ যে ইন্ট্রিনসিক সাইজিং হলো ব্রাউজারের ডিফল্ট আচরণ, এবং এটি সাধারণত এক্সট্রিনসিক সাইজিংয়ের চেয়ে অনেক বেশি নমনীয়তা প্রদান করে।
বাক্স মডেলের ক্ষেত্রগুলি
বাক্সগুলো স্বতন্ত্র মডেলের বিভিন্ন অংশ দিয়ে গঠিত, যেগুলোর প্রত্যেকটি একটি নির্দিষ্ট কাজ করে।
কন্টেন্ট বক্স হলো সেই স্থান যেখানে কন্টেন্ট থাকে। কন্টেন্ট তার প্যারেন্টের আকার নিয়ন্ত্রণ করতে পারে, তাই এটি সাধারণত সবচেয়ে পরিবর্তনশীল আকারের এলাকা।
প্যাডিং বক্সটি কন্টেন্ট বক্সকে ঘিরে থাকে এবং এটি হলো padding প্রপার্টি দ্বারা তৈরি হওয়া ফাঁকা স্থান। যেহেতু প্যাডিং বক্সের ভিতরে থাকে, তাই এর তৈরি করা ফাঁকা স্থানে বক্সের ব্যাকগ্রাউন্ড দেখা যায়। যদি বক্সটিতে overflow: auto বা overflow: scroll মতো ওভারফ্লো নিয়ম সেট করা থাকে, তাহলে স্ক্রলবারগুলোও এই স্থানটি দখল করে।
বর্ডার বক্সটি প্যাডিং বক্সকে ঘিরে রাখে এবং এর পরিসর border ভ্যালু দ্বারা নির্ধারিত হয়, যা এলিমেন্টটির জন্য একটি ভিজ্যুয়াল ফ্রেম তৈরি করে। এলিমেন্টটির বর্ডার এজ হলো আপনার দেখার সীমার শেষ প্রান্ত।
সর্বশেষ অংশ, অর্থাৎ মার্জিন বক্স , হলো আপনার বক্সের চারপাশের জায়গা, যা বক্সের margin রুল দ্বারা নির্ধারিত হয়। outline এবং box-shadow মতো প্রোপার্টিগুলোও এই জায়গা দখল করে, কারণ এগুলো এলিমেন্টের উপরে আঁকা হয় এবং বক্সের আকারকে প্রভাবিত করে না। কোনো বক্সের outline-width 200px পরিবর্তন করলেও বর্ডারের ভেতরের অংশে কোনো পরিবর্তন হয় না।
একটি দরকারি উপমা
বক্স মডেলটি বোঝা বেশ জটিল, তাই এ পর্যন্ত যা শিখেছেন তা বোঝানোর জন্য এখানে একটি উপমা দেওয়া হলো।
এই চিত্রে, একটি দেয়ালে পাশাপাশি তিনটি ছবির ফ্রেম লাগানো আছে। ফ্রেমে থাকা ছবিটির উপাদানগুলো বক্স মডেলের সাথে নিম্নরূপভাবে মিলে যায়:
- কন্টেন্ট বক্সটিই হলো আর্টওয়ার্ক।
- ফ্রেম এবং শিল্পকর্মের মাঝখানে থাকা সাদা মাউন্টিং বোর্ডটিই হলো প্যাডিং বক্স।
- বর্ডার বক্সটি হলো ফ্রেম, যা শিল্পকর্মটির জন্য একটি আক্ষরিক সীমানা তৈরি করে।
- মার্জিন বক্স হলো ফ্রেমগুলোর মধ্যবর্তী স্থান।
- ছায়াটি মার্জিন বক্সের সমান জায়গা দখল করে।
বক্স মডেলটি ডিবাগ করুন
ব্রাউজার ডেভেলপার টুলস একটি নির্বাচিত বক্সের বক্স মডেল ক্যালকুলেশনের ভিজ্যুয়ালাইজেশন প্রদান করে, যা আপনাকে বক্স মডেলটি কীভাবে কাজ করে এবং আপনি যে ওয়েবসাইটে কাজ করছেন তার উপর এটি কীভাবে প্রভাব ফেলে তা বুঝতে সাহায্য করতে পারে।
ক্রোমে এটি চেষ্টা করতে:
- ডেভটুলস খুলুন ।
- একটি উপাদান নির্বাচন করুন ।
- বক্স মডেল ডিবাগারটি দেখান।
বক্স মডেলটি নিয়ন্ত্রণ করুন
বক্স মডেলটি কীভাবে নিয়ন্ত্রণ করতে হয় তা বুঝতে হলে, প্রথমে আপনাকে বুঝতে হবে আপনার ব্রাউজারে কী ঘটে।
প্রতিটি ব্রাউজার HTML ডকুমেন্টে একটি ইউজার এজেন্ট স্টাইল শীট প্রয়োগ করে। এই স্টাইল শীটটি নির্ধারণ করে যে, এলিমেন্টগুলোর জন্য নির্দিষ্ট CSS না থাকলে, সেগুলোর চেহারা ও আচরণ কেমন হবে। ইউজার এজেন্ট স্টাইল শীটের CSS ব্রাউজারভেদে ভিন্ন হয়, কিন্তু প্রতিটি ব্রাউজারেরই কিছু ডিফল্ট সেটিংস থাকে যা কন্টেন্ট পড়া সহজ করে তোলে।
ইউজার এজেন্ট স্টাইল শীট সেইসব এলিমেন্টের জন্য ডিফল্ট ভ্যালু সেট করে যেগুলো display গ্রহণ করে। উদাহরণস্বরূপ, একটি <div> এলিমেন্টের ডিফল্ট display ভ্যালু হলো block , একটি <li> এর ডিফল্ট display ভ্যালু হলো list-item , এবং একটি <span> এর ডিফল্ট display ভ্যালু হলো inline ।
একটি inline এলিমেন্টের একটি ব্লক মার্জিন থাকে, কিন্তু অন্যান্য এলিমেন্টগুলো তা মানে না। inline-block ব্যবহার করলে, অন্যান্য এলিমেন্টগুলো ব্লক মার্জিন মেনে চলে, কিন্তু প্রথম এলিমেন্টটি inline এলিমেন্ট হিসেবে তার বেশিরভাগ আচরণই বজায় রাখে। একটি block আইটেম ডিফল্টভাবে উপলব্ধ ইনলাইন স্পেস পূরণ করে, যেখানে inline এবং inline-block এলিমেন্টগুলো কেবল তাদের কন্টেন্টের সমান আকারের হয়।
ইউজার এজেন্ট স্টাইল শীট box-sizing জন্যও ডিফল্ট মান নির্ধারণ করে, যা একটি বক্সকে তার আকার গণনা করার পদ্ধতি বলে দেয়। ডিফল্টরূপে, সমস্ত এলিমেন্টের জন্য box-sizing: content-box; ` সেট করা থাকে। এর মানে হলো, যখন আপনি width এবং height মতো ডাইমেনশন সেট করেন, তখন সেই ডাইমেনশনগুলো কন্টেন্ট বক্সের ক্ষেত্রে প্রযোজ্য হয়। এরপর যদি আপনি padding এবং border সেট করেন, তবে এই মানগুলো কন্টেন্ট বক্সের আকারের সাথে যুক্ত হয়ে যায়।
আপনার বোধগম্যতা যাচাই করুন
বক্স মডেলের আকার কীভাবে বৈশিষ্ট্যগুলোকে প্রভাবিত করে, সে বিষয়ে আপনার জ্ঞান পরীক্ষা করুন।
.my-box { width: 200px; border: 10px solid; padding: 20px; }
আপনার মতে .my-box কতটা চওড়া হবে?
box-sizing: border-box হলে 200px সঠিক হতো। এই বক্সটির প্রকৃত প্রস্থ ২৬০ পিক্সেল। যেহেতু CSS-এ ডিফল্ট box-sizing: content-box ব্যবহার করা হয়েছে, তাই এর প্রয়োগকৃত প্রস্থটি হলো কন্টেন্টের প্রস্থ, এবং এর সাথে দুই পাশের padding ও border যুক্ত হয়। কন্টেন্টের জন্য ২০০ পিক্সেল + প্যাডিংয়ের জন্য ৪০ পিক্সেল + বর্ডারের জন্য ২০ পিক্সেল মিলিয়ে মোট দৃশ্যমান প্রস্থ হয় ২৬০ পিক্সেল।
আপনি border-box আকার নির্দিষ্ট করে এটি পরিবর্তন করতে পারেন:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
এই বিকল্প বক্স মডেলটি CSS-কে কন্টেন্ট বক্সের পরিবর্তে বর্ডার বক্সে width প্রয়োগ করতে বলে। এর মানে হলো, আমাদের border এবং padding ভেতরের দিকে সরে আসে , তাই যখন আপনি .my-box 200px চওড়া সেট করেন, তখন এটি আসলেই 200px চওড়া হয়ে রেন্ডার হয়।
নিচের ইন্টারেক্টিভ ডেমোতে দেখুন এটি কীভাবে কাজ করে। যখন আপনি box-sizing ভ্যালুটি টগল করবেন, তখন নীল অংশটি দেখাবে যে বক্সের ভিতরে কোন CSS প্রয়োগ করা হচ্ছে।
*,
*::before,
*::after {
box-sizing: border-box;
}
এই CSS রুলটি ডকুমেন্টের প্রতিটি এলিমেন্ট এবং প্রতিটি ::before ও ::after সিউডো এলিমেন্টকে সিলেক্ট করে এবং box-sizing: border-box প্রয়োগ করে। এর মানে হলো, এখন প্রতিটি এলিমেন্ট এই বিকল্প বক্স মডেলটি ব্যবহার করে।
যেহেতু বিকল্প বক্স মডেলটি আরও অনুমানযোগ্য হতে পারে, তাই ডেভেলপাররা প্রায়শই এই নিয়মটি রিসেট এবং নর্মালাইজারগুলিতে যুক্ত করেন, যেমন A (more) Modern CSS Reset ।