اینلاین-بلاک در CSS (display: inline-block)
در این راهنما «اینلاین-بلاک (Inline-block)» را از متن منبع بازسازی کرده ایم. این مقدارِ نمایش، خصوصیات «اینلاین» و «بلاک» را ترکیب می کند؛ بنابراین در یک خط می نشیند، اما می توانید عرض، ارتفاع و فاصله های عمودی را نیز تنظیم کنید.
رفتار display: inline، اینلاین-بلاک و بلاک
کد زیر تفاوت سه رفتار را نشان می دهد؛ عنصر اینلاین در خط جاری می ماند، «اینلاین-بلاک» در خط است ولی اندازه پذیر است و «بلاک» کل عرض را می گیرد:
span.a { display: inline; padding: 5px; border: 2px solid red; } span.b { display: inline-block; width: 100px; height: 35px; padding: 5px; border: 2px solid red; } span.c { display: block; width: 100px; height: 35px; padding: 5px; border: 2px solid red; }نکته: با اینلاین-بلاک می توانید margin-top و margin-bottom را مانند عناصر بلاک تنظیم کنید.
منوی افقی با اینلاین-بلاک
کاربرد رایج «اینلاین-بلاک» در منوهای افقی است؛ آیتم های لیست کنار هم قرار می گیرند و همچنان اندازه پذیر می مانند:
.nav { background-color: lightgray; list-style-type: none; padding: 0; margin: 0; } .nav li { display: inline-block; font-size: 18px; padding: 15px; }چه زمانی از اینلاین-بلاک استفاده کنیم؟
- برای دکمه ها یا آیتم های منو که باید در یک خط و با ابعاد قابل کنترل باشند.
- برای ردیف های ساده، اما برای لایه بندی پیچیده بهتر است از Flexbox یا Grid استفاده شود.
- برای آشنایی بیشتر با شناورسازی، به نمونه های شناوری و بخش شناوری سر بزنید.
هشدار: اگر به پاکسازی جریان نیاز دارید، به جای شناوری از «اینلاین-بلاک» استفاده کنید یا به پاکسازی شناوری مراجعه کنید. همچنین برای آشنایی با انواع حالت های نمایش، صفحه نمایش/قابلیت دید را ببینید. برای دسترسی سریع، این صفحه اینلاین-بلاک را نشانه گذاری کنید.