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

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

در ادامه سری آموزش های 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]

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

درباره inline block بیشتر بخوانید.