تخطيط CSS - العرض: كتلة مضمنة
العرض: قيمة مضمنة
مقارنةً بـ display: inline
، يتمثل الاختلاف الرئيسي في أنه display: inline-block
يسمح بتعيين العرض والارتفاع على العنصر.
أيضًا ، مع
display: inline-block
، يتم احترام الهوامش العلوية والسفلية / الحشوات ، لكن مع display: inline
ذلك لا يتم احترامها.
مقارنةً بـ display: block
، يتمثل الاختلاف الرئيسي في display: inline-block
عدم إضافة فاصل أسطر بعد العنصر ، لذلك يمكن أن يجلس العنصر بجوار العناصر الأخرى.
يوضح المثال التالي السلوك المختلف
لـ display: inline
و :display: inline-block
display: block
مثال
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;
}
استخدام كتلة مضمنة لإنشاء روابط التنقل
أحد الاستخدامات الشائعة display: 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;
}