ইনলাইন-ব্লক মান

এখন অনেক কাল পরে বক্স এর গ্রিড তৈরি সম্ভব যা float প্রোপার্টি ব্যবহার করলে ব্রাউজার এর প্রসস্থতা অনুসারে পূর্ণ এবং সুন্দরভাবে ফিট হয়ে যায় (যখন ব্রাউজার এর আকার পরিবর্তন করা হয়)।

display প্রোপার্টি এর inline-block মান এটিকে আরও সহজ করেছে।

inline-block এলিমেন্ট inline এলিমেন্ট এর মতই, কিন্তু এদের প্রসস্ততা ও উচ্চতা নির্ধারণ করা যায়।

উদাহরণ

পুরাতন পদ্ধতি অনুসারে float ব্যবহার করা (floating বক্স এর পরে আমাদের clear প্রোপার্টিও নির্ধারণ করে দিতে হয়)

---

.floating-box {
     float: left;
     width: 150px;
     height: 75px;
     margin: 10px;
     border: 3px solid #8AC007; 
 }
 
 .after-box {
     clear: left;
 }

---

 

 

একই কাজ display প্রোপার্টি এর inline-block মান নির্ধারণ করে দিয়েও করা যায় (কোন clear প্রোপার্টি এর পয়োজন হয় না)

---

.floating-box {
     display: inline-block;
     width: 150px;
     height: 75px;
     margin: 10px;
     border: 3px solid #8AC007; 
 }

---