خاصية inline-block في CSS | أساسيات CSS

 

كما ذكرنا سابقًا، يتم وضع العناصر التي تحتوي سمة display الخاصة بها على قيمة inline-block بجانب بعضها البعض مثل العناصر inline. بالطبع، في هذه الحالة، لا يوجد حد لاستخدام سمات padding و margin لأعلى ولأسفل. تجعل هذه الميزة سمة  inline-block  سمة مثالية لإنشاء قوائم في المواقع.


قيمة inline-block

منذ فترة طويلة تم تأسيس شبكة من المربعات لملء عرض المتصفح (خاصة عندما يتغير حجم شاشة المتصفح) باستخدام سمة float.

ومع ذلك، فإن استخدام قيمة inline-block لسمة display يجعل ذلك أسهل. عناصر inline-block هي نفسها العناصر inline، ولكنها يمكن أن تكون طويلة وواسعة (تجعل هذه الميزة سمة inline-block سمة مثالية لإنشاء قوائم على المواقع.)

لاحظ المثال التالي. يتم استخدام نفس الطريقة القديمة لاستخدام السمة float لوضع عدة مربعات بجوار بعضها البعض (لاحظ أنه في هذه الطريقة نحتاج إلى استخدام السمة clear للعناصر بعد المربعات):


.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}

.after-box {
clear: left;
}

يمكن الحصول على النتيجة التي تم الحصول عليها من المثال أعلاه بطريقة أبسط باستخدام قيمة inline-block لسمة display (لاحظ أن هذه الطريقة لا تتطلب استخدام السمة clear):

.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}


كلمات مفتاحية: