CSS display: inline-block

`display: inline-block;` در CSS یک ویژگی است که ترکیبی از خصوصیات `inline` و `block` را دارد.

کاری که انجام می‌دهد:

* عناصر با `inline-block` در یک خط کنار هم قرار می‌گیرند، مثل عناصر `inline` (درون خطی).
* اما بر خلاف عناصر صرفاً `inline`، می‌توان به آنها عرض، ارتفاع، حاشیه و فاصله درونی (padding) داد، مثل عناصر `block` (بلوک).
* همچنین، این عناصر حاشیه‌ها و فاصله‌های عمودی را در نظر می‌گیرند، در حالی که عناصر `inline` این کار را نمی‌کنند.

کاربردهای معمول:

* چیدمان عناصری که کنار هم قرار می‌گیرند و در عین حال بتوان اندازه‌شان را کنترل کرد.
* ساخت منوهای ناوبری افقی.
* طراحی‌هایی که می‌خواهیم عناصر کنار هم باشند ولی قابل تنظیم اندازه باشند.

مثال:

“`css
.box {
display: inline-block;
width: 150px;
height: 100px;
background-color: lightblue;
margin: 5px;
}
“`