Layout - display: inline-block

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

مقدار 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 را نمایش می‌دهد:

مثال
 1 span.a {
 2   display: inline; /* the default for span */
 3   width: 100px;
 4   height: 100px;
 5   padding: 5px;
 6   border: 1px solid blue;
 7   background-color: yellow;
 8 }
 9 
10 span.b {
11   display: inline-block;
12   width: 100px;
13   height: 100px;
14   padding: 5px;
15   border: 1px solid blue;
16   background-color: yellow;
17 }
18 
19 span.c {
20   display: block;
21   width: 100px;
22   height: 100px;
23   padding: 5px;
24   border: 1px solid blue;
25   background-color: yellow;
26 }


استفاده از inline-block (بلوک درون خطی) برای ساخت لینک های navigation

یکی ازاستفاده‌های رایج display: inline-block برای نمایش آیتم‌های لیست به صورت افقی به جای عمودی است. مثال زیر لینک‌های navigation را به صورت افقی می‌سازد:

مثال
 1 .nav {
 2   background-color: yellow;
 3   list-style-type: none;
 4   text-align: center; 
 5   padding: 0;
 6   margin: 0;
 7 }
 8 
 9 .nav li {
10   display: inline-block;
11   font-size: 20px;
12   padding: 20px;
13 }



منابع آموزشی

  1. ↑ w3schools.com: CSS Layout - display: inline-block



برگرفته از «https://wikicod.ir/w/index.php?title=CSS:Layout_-_display:_inline-block&oldid=8159»