X

X

X

CSS Layout - ইনলাইন ইলামেন্ট


inline-block ইলামেন্ট

এই পর্যন্ত আমরা জেনেছি একটি ইলামেন্টের পাশে আরেকটি ইলামেন্টকে উপস্থাপণ করার জন্য float ব্যবহার করতে হয়। এটি দিয়ে গ্রিড তৈরি করা হয়।

তবে যখন display প্রপার্টির মান inline-block করা হয় তখন গ্রিড তৈরি আরও সহজ হয়। কেননা inline-block ইলামেন্টের দৈর্ঘ্য ও প্রস্থের মান নির্ধারণ করা যায়। সাধারণত শুধুমাত্র inline ইলামেন্টে এটি করা যায় না।
inline-block ইলামেন্টসমূহ ইনলাইন ইলামেন্টের মত, কিন্তু এরা ব্লকলেভেল ইলামেন্টের মত কাজ করে।

উদাহরণ

পুরাতন পদ্ধতি – float প্রপার্টির ব্যবহার।

Code Example

<style>
.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}

.after-box {
    clear: left;
    border: 3px solid red;      
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

একই আউটপুট display property এর মান inline-block সেট করেও পাওয়া যায়।

Code Example

<style>
.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}

.after-box {
    border: 3px solid red; 
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।