در حال بارگذاری...

Inline-block در CSS

درس قبل مقدارهای روزمرهٔ display را نقشه کرد. اینجا هیبرید را درست تمرین می‌کنیم: inline-block. می‌خواهید همسایه‌ها وقتی جا باشد روی یک خط بمانند — مثل متن — و در عین حال جعبه‌ای واقعی داشته باشید که width و height و padding را جدی بگیرد. همین کارش است.

مقایسهٔ کنار هم

📊 inline در برابر inline-block در برابر block

حالت	رفتار خط	Width / height / padding
`inline`	داخل خط متن می‌نشیند	معمولاً width/height نادیده؛ padding گاهی عجیب درمی‌آید
`inline-block`	وقتی جا باشد در همان خط می‌ماند	width و height و padding مثل جعبه کار می‌کنند
`block`	از خط خودش شروع می‌شود	مدل جعبه کامل؛ اغلب عرض ردیف را پر می‌کند

وقتی عنصر باید با خواهر و برادرش یک ردیف را شریک شود ولی اندازهٔ قابل‌اندازه‌گیری هم لازم دارد — چیپ، تگ، برچسب آیکون، دکمه‌های جمع‌وجور نوار ابزار — سراغ inline-block بروید. ستون‌های تمام‌صفحه و تراز پیچیده را برای Flexbox و Grid بعدی بگذارید.

چیپ اندازه‌دار که هنوز خط را شریک می‌شود

برخلاف inline خالص، چیپ می‌تواند padding و عرض ثابت داشته باشد و کنار چیپ‌های دیگر بنشیند.

چیپ اندازه‌دار

css

.chip {
display: inline-block;
width: 7rem;
padding: 0.4rem 0.75rem;
text-align: center;
border: 1px solid #c5c5c5;
border-radius: 999px;
background: #f7f7f7;
}

یک نوار ابزار ساده

چند کنترل هم‌عرض می‌توانند روی یک ردیف بنشینند. فاصله را با margin جدا کنید. برای یک نوار آرام، تا رسیدن Flexbox همین کافی است.

نوار ابزار inline-block

css

.tool {
display: inline-block;
width: 5.5rem;
padding: 0.5rem 0;
text-align: center;
margin-right: 0.35rem;
border: 1px solid #0b5fff;
border-radius: 0.35rem;
background: #e8f0ff;
}

تراز عمودی داخل خط

جعبه‌های سطح-درون‌خطی کنار متن یا تصویر ممکن است ارتفاع‌های مختلفی داشته باشند. vertical-align جایشان را جابه‌جا می‌کند — برای جفت آیکون+برچسب، middle انتخاب آرامی است.

هم‌تراز با متن

css

.icon {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
vertical-align: middle;
background: #0b5fff;
border-radius: 0.2rem;
}

.label {
display: inline-block;
vertical-align: middle;
margin-left: 0.4rem;
font-weight: 600;
}

تلهٔ فاصلهٔ فضای خالی

مرورگر فاصله و خط‌جدید بین تگ‌ها را مثل گرهٔ متن می‌بیند. بین دو خواهر inline-block، همان فاصلهٔ کوچک به شکاف دیدنی تبدیل می‌شود. این gap فлекс نیست — باقی‌ماندهٔ فضای خالی HTML است.

شکاف را ببینید

css

/* HTML شبیه:
<span class="tile">A</span>
<span class="tile">B</span>
به‌خاطر خط‌جدید شکاف می‌گذارد. */
.tile {
display: inline-block;
width: 3rem;
padding: 0.5rem 0;
text-align: center;
background: #fff3cd;
}

برای آرام کردن شکاف: تگ‌ها را بدون فاصله در یک خط بگذارید، خط‌جدید را کامنت کنید، یا با احتیاط margin منفی کوچک بزنید. بعداً Flexbox فاصلهٔ تمیزتری می‌دهد — هر ردیفی را تا ابد با inline-block مجبور نکنید.

عادت آرام inline-block

برای آیتم‌های ردیف یک کلاس مشترک بگذارید. عمدی اندازه بدهید. فقط وقتی شکاف اذیت می‌کند سراغ فضای خالی بروید. کل صفحه را با inline-block تودرتو نچینید — همان درد دوران float برمی‌گردد. position و float درس خودشان را دارند.

کلاس مشترک آیتم

css

.row-item {
display: inline-block;
vertical-align: top;
width: 8rem;
padding: 0.75rem;
margin: 0 0.25rem 0.5rem 0;
border: 1px solid #ddd;
box-sizing: border-box;
}

خودتان امتحان کنید

سه .chip با inline-block، عرض ثابت و padding بسازید — ببینید یک خط را شریک می‌شوند.
نوار چهار دکمه‌ای .tool با عرض برابر و margin-right بسازید.
یک .icon کوچک کنار .label بگذارید و vertical-align: middle را امتحان کنید.
دو .tile خواهر را یک‌بار در دو خط HTML و یک‌بار در یک خط بگذارید — شکاف را مقایسه کنید.
یک جمله بنویسید: کی inline-block کافی است و کی صبر می‌کنید تا Flexbox؟

اشتباه‌های رایج

انتظار داشتن که inline خالص مثل جعبهٔ واقعی به width / height گوش بدهد
تقصیر را گردن CSS انداختن برای «شکاف مرموز» در حالی که فضای خالی HTML بین تگ‌هاست
ساختن کل چیدمان چندستونهٔ صفحه با inline-block
این درس را مثل مرور کلی display (block / none) جلسهٔ قبل دیدن
پریدن به دستورهای position یا float قبل از مسلط شدن به هیبرید

جمع‌بندی

inline-block مثل متن در خط می‌نشیند ولی برای اندازه و padding جعبهٔ واقعی دارد
برای چیپ، نوار ابزار جمع‌وجور و جفت آیکون+برچسب مناسب است
vertical-align هم‌ترازی همسایه‌های با ارتفاع متفاوت را نرم می‌کند
فضای خالی بین تگ‌ها می‌تواند شکاف دیدنی بسازد — علت را بشناسید
برای ردیف‌های پیچیده و فاصلهٔ تمیز، Flexbox بعداً می‌آید؛ inline-block را عمدی نگه دارید

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان