CSS ระบบจัดการเว็บ - display: inline-block

display: inline-block

সাথে display: inline তুলনায়, প্রধান পার্থক্য হল display: inline-block এলাকার উপর প্রস্থ এবং উচ্চতা নির্ধারণ করা যায়。

একইভাবে, display: inline-block নিয়ে নেওয়ার ক্ষেত্রে উপরের নিচের বাইরের/অভ্যন্তরীণ মার্জিন/মার্জিন সংরক্ষণ করা হয়, যখন display: inline তো এটা হবে না。

display: block-এর তুলনায়, প্রধান পার্থক্য হল যে display: inline-block এলাকার পরে নিম্নলিপি যোগ করা হয় না, তাই এই এলাকা অন্য এলাকার পাশে থাকতে পারে。

এই উদাহরণে দেখা যাচ্ছে display: inline, display: inline-block এবং display: block এর বিভিন্ন আচরণ:

ইনস্ট্যান্স

span.a {
  display: inline; /* span 默许值 */
  width: 100px;
  height: 100px;
  padding: 5px;
  বর্তন্তী: ১পিক্সেল সলিড ব্লু; 
  ব্যাকগ্রাউন্ড-কালার: ইউলয়েল; 
}
span.b {
  ডিসপ্লে: ইনলাইন-ব্লক;
  width: 100px;
  height: 100px;
  padding: 5px;
  বর্তন্তী: ১পিক্সেল সলিড ব্লু; 
  ব্যাকগ্রাউন্ড-কালার: ইউলয়েল; 
}
span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  বর্তন্তী: ১পিক্সেল সলিড ব্লু; 
  ব্যাকগ্রাউন্ড-কালার: ইউলয়েল; 
}

আপনার হাতে পরীক্ষা করুন

নেভিগেশন লিঙ্ক তৈরি করতে inline-block ব্যবহার

ডিসপ্লের একটি সাধারণ ব্যবহারইনলাইন-ব্লক একটি হলেও ভিক্টিক্যাল নয়, হলেও হোরিজন্টাল লিস্ট আইটেমস দেখানোর জন্য ব্যবহৃত হয়। নিচের উদাহরণটি একটি হলেও নেভিগেশন লিঙ্ক তৈরি করে:

ইনস্ট্যান্স

.ন্যাভ {
  ব্যাকগ্রাউন্ড-কালার: ইউলয়েল; 
  লিস্ট-স্টাইল-টাইপ: নয়াদা;
  টেক্সট-অ্যালাইন: সেন্টার; 
  প্যাডিং: ০;
  মার্গিন: ০;
}
.ন্যাভ লি {
  ডিসপ্লে: ইনলাইন-ব্লক;
  ফন্ট-সাইজ: ২০পিক্সেল;
  প্যাডিং: ২০পিক্সেল;
}

আপনার হাতে পরীক্ষা করুন