تاریخ انتشار:۱۳:۴۸ ۱۳۹۹/۷/۱۹

مقدار inline-block

مدتی طولانی است که ایجاد شبکه ای از باکس ها برای پر کردن پهنای مرورگر (به خصوص موقعی که اندازه ی صفحه ی مرورگر تغییر میکند ) با استفاده از صفت float به خوبی انجام میشود.

با این وجود استفاده از مقدار inline-block برای صفت display این کار را ساده تر کرده است. عناصر inline-block همچون عناصر inline هستند ولی آنها میتوانند دارای طول و عرض باشند.(این ویژگی صفت inline-block را به صفتی ایده آل برای ایجاد منو ها در سایت ها تبدیل کرده است.)

به مثال زیر دقت کنید. در این مثال برای قرار دادن چندین باکس در کنار یکدیگر از همان روش قدیمی تر یعنی استفاده از صفت float کمک گرفته شده است (دقت داشته باشید که در این روش برای عناصری که بعد از باکس ها قرار دارند نیاز به استفاده از صفت clear داریم) :

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

نتیجه ای که از نمونه مثال بالا بدست آمد را میتوان به روشی ساده تر با استفاده از مقدار inline-block برای صفت display به دست آورد (دقت کنید که در این روش  نیاز به استفاده از صفت clear نیست) :

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

منبع:learnsource