CSS Box Model

ইতিমধ্যে আমরা জানি padding, border, margin কিভাবে কাজ করে। এই তিনটা জিনিস একসাথে নিচের মত চিত্রায়িত করে আরেকবার ব্যাখ্যা করবঃ

উপরের চিত্রে একটি ঘরে একটি খাট আছে। খাটের উপর একটি ফোম অথবা একটি বিছানা রাখা আছে। কিছু ব্যাপার খেয়াল করেন, ঘরের মাঝে খাট আছে, তাই ঘর টা কে আমরা parent আর ঘরের child হল খাট। আবার খাটের মাঝে বিছানা রাখা আছে, তাই আমরা বলতে পারি, খাটের child হল বিছানা। এখন আপনি যদি বিছানার উপর শুয়ে থাকেন তাহলে আমরা বলতে পারি আপনি বিছানার child. এখানে যেই বড় জায়গা ছোট একটা জায়গা বা বস্তু ধারন করছে সেটাকে parent আর ছোট জায়গাটাকে child বলছি। এই আলোচনায় সবচেয়ে ছোট হলেন আপনি। আপনি বিছানাতে শুয়ে থকেন বিছানার সবটুকু অংশ জুড়ে না। বিছানার আশে পাশ থেকে কিছু অংশ ছেড়ে শুয়ে থাকেন। বিছানা থেকে যে অংশ টা আপনি ছেড়ে দিলেন সেটা কে আমরা তুলনা করব padding এর সাথে। আবার লক্ষ্য করুন, বিছানা বা ফোম টা কিন্তু খাটের সবটুকু অংশ জুড়ে নাই। চারপাশে কিছু কাঠ দেখা যাচ্ছে। যতটুকু কাঠ দেখা যাচ্ছে সেটা কে আমরা border এর সাথে তুলনা করব। আবার খাট টা কিন্তু ঘরের সবটুকু অংশ জুড়ে নাই। ঘরের মাঝে বেশ কিছু ফাঁকা জায়গা আছে। ঘরের ঐ ফাঁকা জায়গাটাকে আমরা তুলনা করব margin এর সাথে। অর্থাৎ, সবচেয়ে ছোট অংশটা থেকে বড় অংশের দিকে যাইতে যেই ফাঁকা অংশ পাই সেগুলো কে আমরা তুলনা করতে পারি যথাক্রমে padding, borderএবং margin এর সাথে।

প্রতিটা HTML এর element এর একটি height, width থাকে। তাই প্রতিটা HTML element কে আপনি একটা box এর মত চিন্তা করতে পারেন। box এর ভেতরে থাকবে content, সেই box এর চারপাশে কিছু ফাঁকা জায়গা থাকতে পারে যেটা কে আমরা padding বলতে পারি, এখন padding সহ যে box টা হল সেটার চারপাশেও কিছু ফাঁকা জায়গা থাকতে পারে, সেই ফাঁকা জায়গাটা কে আমরা border বলব। এখন border সহ যে box টা পেলাম সেটাকে ধারন করছে যে parent element সেই parent element থেকে একটা ফাঁকা জায়গা থাকতে পারে সেটাকে বলব margin. সম্পূর্ন ব্যাপারটাকে নিচের চিত্রের মত দেখানো যায়।

css box model
css box model

উদাহরণঃ

ফলাফল

উপরের কোডের আউটপুট দেখে আপনার বুঝার কথা না কিভাবে padding এবং margin কাজ করছে। তাই নিচের চিত্রটি লক্ষ্য করুনঃ

এখানে box এর height = 80px এবং width = 80 px. এখন চারপাশে 10px padding যোগ করায়, নতুন height = 80 + 10*2 = 80 +20 = 100px এবং width = 80 + 10*2 = 80 +20 = 100px

আবার চারপাশে 8px borderযোগ করায়, নতুন height = 100 + 8*2 = 100 +16 = 116px এবং width = 100 + 8*2 = 100 +16 = 116px. অর্থাৎ নতুন box এর height = 116px এবং width = 116px. এই box টি তার parent element, body থেকে চারপাশে 50px margin নিয়ে আছে। তাই margin যোগ হবার পর height = 116 + 50*2 = 216px এবং width = 116 + 50*2 = 216px.

অর্থাৎ,

একটি HTML element এর Total width = width + right padding + left padding + right border + left border + right margin + left margin

একটি HTML element এর Total height = height+ right padding + left padding + right border + left border + right margin + left margin