صفحه نمایش: مقدار بلوک درون خطی
در مقایسه با display: inline
، تفاوت عمده این است که display: inline-block
اجازه می دهد عرض و ارتفاع را روی عنصر تنظیم کنید.
همچنین ، با display: inline-block
، حاشیه / بالشتک های بالا و پایین احترام می گذارند ، اما با display: inline
این وجود رعایت نمی شوند.
در مقایسه با display: block
، تفاوت عمده این است که display: inline-block
بعد از المان شکسته شدن خط اضافه نمی شود ، بنابراین عنصر می تواند در کنار عناصر دیگر قرار بگیرد.
مثال زیر رفتار متفاوت را نشان می دهد display: inline
، display: inline-block
و display: block
:
مثال
span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.c { display: block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; }
استفاده از بلوک درون خطی برای ایجاد پیوندهای پیمایش
یکی از کاربردهای معمول display: inline-block
نمایش موارد به صورت افقی به جای عمودی است. مثال زیر پیوندهای ناوبری افقی ایجاد می کند:
مثال
.nav { background-color: yellow; list-style-type: none; text-align: center; padding: 0; margin: 0; } .nav li { display: inline-block; font-size: 20px; padding: 20px; }