021-20483015

بلوک اینلاین در 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;
    }
    مشاهده مثال
  •  

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط