بلوک اینلاین در CSS

مقدار بلوک اینلاین

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

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

• مقدار inline-block

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

  مشاهده مثال
•  

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

مثال :

• استفاده از مقدار inline-block

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

  مشاهده مثال
•