مقدار inline-block در CSS یکی از مقادیر مهم برای کنترل رفتار عناصر در صفحات وب است.
تفاوت‌ها با display: inline و display: block:
-
display: inline:- عناصر در خط باقی می‌مانند.
- نمی‌توان برای آن‌ها
widthوheightتعریف کرد. paddingوmarginهای عمودی نادیده گرفته می‌شوند.
-
display: inline-block:- مشابه
inlineاست، اما برخلاف آن، می‌توان برای عناصرwidthوheightتعریف کرد. paddingوmarginهای عمودی نیز اعمال می‌شوند.- خط جدیدی بعد از عنصر ایجاد نمی‌شود، به این معنی که می‌تواند در کنار سایر عناصر قرار گیرد.
- مشابه
-
display: block:- عناصر به صورت بلوکی نمایش داده می‌شوند.
- بعد از هر عنصر یک شکست خط (line-break) ایجاد می‌شود، بنابراین عنصر بعدی در خط جدید قرار می‌گیرد.
مثال مقایسه سه مقدار inline، inline-block و block:
span.a {
display: inline; /* مقدار پیش‌فرض برای 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;
}در این مثال:
span.a(باinline) نمی‌تواند عرض و ارتفاع مشخصی داشته باشد و در همان خط قرار می‌گیرد.span.b(باinline-block) هم عرض و ارتفاع مشخص دارد و هم در خط باقی می‌ماند.span.c(باblock) به صورت بلوکی نمایش داده می‌شود و یک خط جدید پس از آن ایجاد می‌شود.
استفاده از inline-block برای ساخت لینک‌های ناوبری:
یکی از استفاده‌های رایج inline-block، نمایش آیتم‌های لیست به صورت افقی به جای عمودی است. این تکنیک معمولاً برای منوهای ناوبری استفاده می‌شود.
مثال منوی ناوبری افقی:
.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;
}در این مثال، آیتم‌های منو (li) به صورت افقی در کنار هم قرار می‌گیرند به جای اینکه به صورت پیش‌فرض عمودی نمایش داده شوند.
با استفاده از inline-block می‌توانید عناصر را به شکلی انعطاف‌پذیرتر و جذاب‌تر در کنار هم نمایش دهید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام