Layout - display: inline-block

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های 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 }

مشاهدهٔ نتیجه

صفحهٔ بعد»

«صفحهٔ قبل