با عرض سلام و وقت بخیر خدمت کاربران سایت وب ساز هوشمند . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در این آموزش قصد داریم به بررسی مقدار inline-block در CSS که ترکیبی از دو مقدار inline و block در خصوصیت Display است بپردازیم.

همانطور که تاکنون اشاره کردیم مقدار inline عناصر را در یک خط قرار داده و اندازه عناصر را به حداقل می رساند، اما خاصیت block تمام عرض عنصر والد خود را اشغال می کند. و در هر خط یک عنصر را قرار می دهد، در ادامه ی مباحث حالت inline-block در CSS را بررسی می کنیم.

در این آموزش کاربرد اصلی حالت inline-block در CSS و تفاوت آن را با دو مقدار inline و block بررسی کرده ایم.

وضعیت display: inline-block

تفاوت حالت display: inline با display: inline-block در این است که inline-block اجازه ی تنظیم عرض و ارتفاع عناصر را می دهد.

همچنین display: inline-block مقادیر margin/padding بالا و پایین عنصر را اعمال می کند. اما در display: inline چنین نیست.

همچنین حالت display: inline-block بر خلاف حالت display: block عناصر دیگر را به خط بعدی منتقل نمی کند.

مثال زیر تفاوت بین حالات display: inline با display: inline-block و  را  display: block نشان می دهد.

مثال : وضعیت inline-block

span.a {
    display: inline; /* the default for span */
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue; 
    background-color: yellow; 
}

span.b {
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue; 
    background-color: yellow; 
}

span.c {
    display: block;
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue; 
    background-color: yellow; 
}

استفاده از حالت  inline-block در ایجاد لینک های navigation

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

مثال : منوی nav

.nav {
    background-color: yellow; 
    list-style-type: none;
    text-align: center; 
    padding: 0;
    margin: 0;
}

.nav li {
    display: inline-block;
    font-size: 20px;
    padding: 20px;
}

کلام آخر

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