সিএসএস ইনলাইন এবং বক্স - CSS Inline & Box


সিএসএস এর display প্রপার্টি ব্যবহার করে এইচটিএমএল এলিমেন্ট গুলো ওয়েব পেজে কিভাবে প্রদর্শিত বা display হবে তা নির্ধারণ করা হয়।


display প্রোপার্টি

কোন ওয়েব পেজের লেআউট ডিজাইন করতে সিএসএস এর এই প্রোপার্টির ব্যবহার বেশ গুরুত্বপূর্ণ। সিএসএস এর display প্রোপার্টিতে বহুল ভাবে ব্যাবহৃত 3টি মান হল - inline, block এবং inline-block

টিউটোরিয়াল এর এই অধ্যায়ে আমরা display প্রোপার্টির এই 3টি মান নিয়ে আলোচনা করব।


display: inline

সিএসএস স্টাইল কোডে display: inline ব্যবহার করলে, এলিমেন্ট গুলো কেবল মাত্র প্রয়োজন অনুযায়ী প্রস্থ বা width সংরক্ষন বা দখল করে। এই এলিমেন্ট গুলো কোন নতুন লাইন তৈরি করে না।

display: inline ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

span {
   display: inline;
   width: 150px;
   height: 150px;
   padding: 10px;
   border: 2px solid black;
   background-color: orange;
   }

কোড এডিটর



display: block

এইচটিএমএল ব্লক-লেভেল এলিমেন্ট গুলো সাধারণ ভাবে বাম থেকে ডান দিকের সমস্ত স্থান টুকু সংরক্ষণ করে রাখে অর্থাৎ লাইনের সম্পূর্ন প্রস্থ বা width দখল করে নেয়, এই এলিমেন্টকে আপনি লাইনের বা দিকে বা ডান দিকে, যেদিকেই স্থাপন করেন না কেন, সকল ক্ষেত্রেই লাইনের সম্পূর্ন প্রস্থ সংরক্ষন করে। ব্লক-লেভেল এলিমেন্ট গুলো সব সময় একটি নতুন লাইন তৈরি করে।

নিচে একটি উদাহরন দেখুন, যেখানে display: block ব্যবহার করা হয়েছে।

উদাহরণ

span {
   display: block;
   width: 150px;
   height: 150px;
   padding: 10px;
   border: 2px solid black;
   background-color: orange;
   }

কোড এডিটর



display: inline-block

display: inline-block ব্যবহার করার ফলে, inline এবং block এর মিলিত ফল পাওয়া যাবে।

নিচে একটি উদাহরন দেখুন, যেখানে display: inline-block ব্যবহার করা হয়েছে।

উদাহরণ

span {
   display: inline-block;
   width: 150px;
   height: 150px;
   padding: 10px;
   border: 2px solid black;
   background-color: orange;
   }

কোড এডিটর



inline-block ব্যবহার

inline-block মান ব্যবহার করে, নিচে একটি ন্যাভিগেশন বার তৈরি করা হয়েছে।

উদাহরণ

.nav {
   background-color: teal;
   list-style-type: none;
   text-align: center; 
   padding: 10px;
   margin: 0;
   }

.nav li {
   display: inline-block;
   font-size: 17px;
   padding: 18px;
   }

কোড এডিটর



display প্রোপার্টির মান

প্রোপার্টিবর্ণনা
inline
block
inline-block