آموزش مقداردهی inline block در css

حامد محمدیحامد محمدی
101 بازدید
مقداردهی inline block

در آموزش امروز ، مقدار inline block در css را با هم مرور خواهیم کرد.

شما در آموزش های قبلی با ویژگی های مختلفی مثل display , float و… آشنا شده اید.

در آموزش امروز نیاز داریم تایکبار دیگر نگاهی به آموزش های قبلی داشته باشیم. چرا که inline block، ترکیبی از دو مقدار inline و block در ویژگی display است.

همراه ما باشید.

با سلام خدمت همراهان همیشگی سایت پرنیان طرح

در ادامه سری آموزش های css، امروز مقدار inline block در css با هم مرور خواهیم کرد.

inline block ترکبی از دو مقدار inline و block در ویژگی display می باشد. که امکان کنترل بیشتر و بهتری روی عناصر به شما می دهد.

همراه ما باشید تا این ویژگی را با هم مرور کنیم.

inline block در css چیست؟ و چه کاربردی دارد؟

همانطور که پیشتر هم گفته شد، inline block ترکیبی از دو مقدار inline و block است. که هر دو آنها جزو خاصیت های display هستند.

inline عناصر را در یک خط قرار داده و اندازه آنها را به حداقل می رساند.

در حالیکه block تمام عرض عنصر والد( نگهدارنده) خود را اشغال می کند. پس در نتیجه، هر عنصر را در یک خط جداگانه قرار می دهد.

display : inline-block

این وضعیت به شما اجازه می دهد که عرض و ارتفاع عناصر را تنظیم کنید.

همچنین مقادیر margin و padding را در بالا و پایین عناصر اعمال می کند.

اما display: inline چنین امکانی را ندارد.

در ادامه تفاوت های این دو روش باید گفت که، display : inline-block عناصر دیگر را به خط بعدی منتقل نمی کند.

مثال زیر تفاوت این دو وضعیت را نماش می دهد:

[php]
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;
}
[/php]

نتیجه را از اینجا ببینید.

استفاده از inline block در ایجاد لینک های navigation

یکی از پرکاربردترین حالات ویژگی display: inline block ایجاد لینک های navigation است.

یعنی به جای اینکه لینک ها به صورت عمودی قرار بگیرند، در کنار هم و به صورت افقی قرار خواهند گرفت.

درست مانند سرتیتر و منوهای بالایی در سایت ها.

 

منوی افقی در سایت

منوی افقی در سایت

 

مثال زیر نمایش دهنده این کاربرد از inline block است:

[php]
.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;
}
[/php]

نتیجه را از این لینک ببینید.

دسته بندی آموزش css
اشتراک گذاری
راه حل صحیح موفقیت این است که اشتیاق شما به پیروزی بیشتر از ترس شما از شکست باشد.”انیشتین“

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

38+ محصولات
294+ سفارشات تکمیل شده
1720+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت