نمایش خطی-بلوک (Inline-block)
«نمایش خطی-بلوک (inline-block)» ترکیب رفتار «خطی (inline)» و «بلوک (block)» است. یعنی کنارِ هم می آید، اما می توانی عرض و ارتفاع بدهی. مثل دکمه هایی که ردیفی هستند، ولی اندازه دقیق دارند.
مقایسه inline، inline-block و block
در این مثال، سه حالت را می بینی. حالت خطی کنار هم می نشیند؛ بلوک خطِ جدید می گیرد؛ خطی-بلوک هم کنار می آید هم اندازه می گیرد.
<style>
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;
}
</style>
<span class="a">inline</span>
<span class="b">inline-block</span>
<span class="c">block</span>
ساخت منوی افقی ساده
برای منو، روی li مقدار inline-block بده. سپس پدینگ و فونت را تنظیم کن. آیتم ها ردیفی می آیند و اندازه می گیرند.
<style>
.nav {
background-color: lightgray;
list-style-type: none;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 18px;
padding: 15px;
}
</style>
<ul class="nav">
<li>خانه</li>
<li>اخبار</li>
<li>تماس</li>
</ul>
گام های عملی
- عنصرهای کنارِ هم را انتخاب کن.
- روی آن ها display: inline-block بگذار.
- عرض، ارتفاع و فاصله ها را تنظیم کن.
نکته: فاصله سفید بین تگ های inline-block ممکن است فاصله اضافی بسازد. یا کامنتِ HTML بین تگ ها بگذار، یا فونت سایز والد را صفر کن، یا تگ ها را بچسبان.
نکته: اگر ردیف به هم ریخت، از پاک سازی (Clear) کمک بگیر. برای ستون های هم ارتفاع، فلکس باکس گزینه بهتری است.
جمع بندی سریع
- inline-block کنارِ هم می آید و اندازه می گیرد.
- برای منوی افقی بسیار کاربردی است.
- فاصله سفید را مدیریت کن.
- برای چیدمان پیچیده، فلکس بهتر است.