সিএসএস বক্স মডেল - Css Box Model



সমস্ত এইচটিএমএল এলিমেন্টকে বক্স হিসেবে বিবেচনা করা যেতে পারে। ওয়েব পেজের লে-আউট তৈরিতে বক্স মডেলের বিবেচনা করা জরুরি।

সিএসএস বক্স মডেল হল এইচটিএমএল এলিমেন্টের চারপাশের বর্ডার, মার্জিন, প্যাডিং এবং এলিমেন্ট বা কন্টেন্ট এর সম্মিলিত অবস্থা। বক্স মডেল প্রপার্টিগুলো কোন কন্টেন্ট এর চারপাশে বর্ডার, মার্জিন, প্যাডিং বা আউটলাইন নির্ধারণ করে।


সিএসএস বক্স মডেল

css box model demo



বক্স মডেলের বিভিন্ন অংশের বর্ণনা -

* Margin - বর্ডারের চারপাশের ফাকা স্থান নির্ধারণ করাই মার্জিন। মার্জিনের কোন ব্যাকগ্রাউন্ড কালার নেই, এটা পুরোপুরি transparent ।

* Border - কন্টেন্ট প্যাডিং এর চারপাশে অর্থাৎ মার্জিন এবং প্যাডিং এর মধ্যস্থানেই বর্ডার থাকে। ব্যাকগ্রাউন্ডের রং বর্ডার এর উপর প্রভাব বিস্তার করে।

* Padding - কন্টেন্ট এর চারপাশের ফাকা স্থান নির্ধারণ করা হয় প্যাডিং ব্যবহার করে। সিএসএস প্যাডিং প্রপার্টি এলিমেন্টের ব্যাকগ্রাউন্ড কালার দ্বারা প্রভাবিত হয়।

* Content - বক্স মডেলের কন্টেন্ট হল টেক্সট, ছবি ইত্যাদি।


ওয়াইডথ এবং হাইডথ

সিএসএস দিয়ে যখন আপনি কোন এলিমেন্টের width এবং height নির্ধারণ করেন, তখন আপনি আসলে কন্টেন্ট এরিয়ার width এবং height নির্ধারণ করেন। ওয়েব পেজে সুন্দরভাবে কোন কন্টেন্ট প্রদর্শনের জন্য অবশ্যই প্যাডিং, বর্ডার এবং মার্জিন নির্ধারণ করতে হবে।

এলিমেনটের সঠিক সাইজ জানতে হলে, প্যাডিং, বর্ডার এবং মার্জিনও হিসেব করতে হবে।

আমরা ওপরের image টির কথা বিবেচনা করি, image টির সর্বমোট width হল 300px এবং height হল 200px

কোড দেখুন

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;


এবার আমরা কন্টেন্টের width এর হিসেব করি -

+250px (মূল কন্টেন্ট)
+10px(left মার্জিন)
+10px(right মার্জিন)
+10px (left প্যাডিং)
+10px (right প্যাডিং)
+5px (left বর্ডার)
+5px (right বর্ডার)
=300px
অর্থাৎ image টির সর্বমোট width হল 300px

অর্থাৎ কোন কন্টেন্টের সর্বমোট width হিসেব করার নিয়মটি নিম্নরূপ -
=left margin+left border+left padding+content width+right padding+right border+right margin

এবার আমরা image টির height একটা হিসেব করি, এই হিসেবও width এর মত হবে -

+150px (মূল কন্টেন্ট)
+10px(top মার্জিন)
+10px(bottom মার্জিন)
+10px (top প্যাডিং)
+10px (botter প্যাডিং)
+5px (top বর্ডার)
+5px (bottom বর্ডার)
=200px
অর্থাৎ image টির সর্বমোট height হল 250px

অর্থাৎ কোন কন্টেন্টের সর্বমোট height হিসেব করার নিয়মটি নিম্নরূপ -
=top margin+top border+top padding+content height+bottom padding+bottom border+bottom margin

এভাবেই সকল কন্টেন্ট যেমন- image, div, table ইত্যাদি হিসেব করতে হয়।


ব্রাউজার কম্পাটিবিলিটি

এই উদাহরণটি যদি ইন্টারনেট এক্সপ্লোরারের মাধ্যমে open করা হয় তবে দেখা যাবে সর্বমোট width আসলে 300px নেই।

IE8 এবং এর কাছের ভার্সনগুলো width এর সাথে padding এবং border যোগ করে প্রদর্শন করে যদি নীচের মত একটি Doctype ডিকক্লারেশন করা হয়।

কোড দেখুন

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>


এই সমস্যা সমধানের জন্য শুধুমাত্র Doctype ডিক্লারেশন করাই যথেষ্ট।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.