Layout - display: inline-block
پرش به ناوبری
پرش به جستجو
مقدار display: inline-block
در مقایسه با display: inline-block
، تفاوت اصلی این است که display: inline
اجازه میدهد که عرض (به انگلیسی: width) و ارتفاع (به انگلیسی: height) عنصر را تنظیم کنیم.[۱]
همچنین، با display: inline-block
، حاشیهها/ paddingهای بالا و پایین در نظر گرفته میشوند، اما با display: inline
در نظر گرفته نمیشوند.
در مقایسه با display: block
، تفاوت اصلی این است که display: inline-block
یک خط جدید (به انگلیسی: line-break) بعد از عنصر درج نمیکند، بنابراین عنصر در کنار سایر عناصر قرار خواهد گرفت.
مثال زیر تفاوت رفتارهای display: inline
،display: inline-block
و display: block
را نمایش میدهد:
یکی ازاستفادههای رایج display: inline-block
برای نمایش آیتمهای لیست به صورت افقی به جای عمودی است. مثال زیر لینکهای navigation را به صورت افقی میسازد:
منابع آموزشی