آموزش مقدار inline-block در CSS | آموزش کامل + نمونه کد

قبلی بعدی

مقدار inline-block در CSS

مقدار inline-block، ترکیبی از دو مقدار inline و block است.

همانند block می توان:

مقدار width و height را تغییر داد.
مقدار margin، بالا و پایین را تغییر داد.
مقدار padding، بالا و پایین (به صورت طبیعی) را تغییر داد.

همانند inline:

از بلوک جدید شروع نمی شود.
به مقدار مورد نیاز، فضا اشغال می کند.
نکته: برای درک بهتر این آموزش لازم است ابتدا آموزش ویژگی display در CSS را مطالعه کنید.

مقایسه inline با inline-block در CSS

رفتار مقدار inline-block، شبیه به رفتار مقدار inline می باشد، با این تفاوت که در inline-block:

می توان به المان عرض و ارتفاع داد.
می‎‎ توان margin، بالا و پایین را تغییر داد.
می‎‎ توان padding، بالا و پایین به صورت طبیعی را تغییر داد.

مقایسه block با inline-block در CSS

رفتار مقدار inline-block، شبیه به رفتار مقدار block می باشد با این تفاوت که در inline-block:

از بلوک جدید شروع نمی شود.
به مقدار مورد نیاز فضا اشغال می کند.

.inline {
    display: inline; /* متن ها کنار هم قرار می گیرند */
    width: 200px; /* اعمال نمی شود */
    height: 100px; /* اعمال نمی شود */
    padding: 25px; /* اعمال می شود اما روی المان پایین می افتد */
}
.block {
    display: block; /* متن ها زیر هم قرار می گیرند */
    width: 200px;
    height: 100px;
    padding: 25px; /* اعمال می شود اما روی المان پایین می افتد */
}
.inline-block {
    display: inline-block; /* متن ها کنار هم قرار می گیرند */
    width: 200px;
    height: 100px;
    padding: 25px; /* اعمال می شود اما روی المان پایین می افتد */
}

ساخت منوی سایت با inline-block در CSS

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

.nav {
    margin: 0;
    padding: 0;
    font-size: 0;
}
.btn {
    display: inline-block;
    text-decoration: unset;
    font-size: 20px;
    padding: 10px 20px;
    border: solid 1px #ccc;
    background: #6cf83b;
    color: #000;
    cursor: pointer;
}
.btn:hover {
    color: #6cf83b;
    background: #000;
}

خلاصه درس

در این درس با ویژگی inline-block در CSS:

تفاوت های inline و block با inline-block
ساخت منوی سایت با inline-block

آشنا شدیم.

قبلی بعدی

توسعه دهندگان

احسان اسلامی