انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #5 من درس: عرض العناصر في لغة CSS

CSS display inline block خاصية display مع القيمة inline-block في لغة CSS

سوف تتعلم في هذا الدرس طريقة عرض عناصر HTML سواء عرض أفقي أو عرض رأسي تٌصف العناصر بجار بعضها لبعض أو تُصف أسفل بعض عن طريق خاصية display في لغة CSS.

1 صفوف تعليمية
لغة CSS
7,641 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

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


العناصر من النوع display block تُعرض بالشكل التالي:

  • دائماً تكون في نفس السطر إذا كان لها مساحة في هذا السطر.
  • دائماً يكون معها عناصر أخري علي نفس السطر.
  • لا تقوم بحجز عرض الصفحة المتبقي ولها عرض بحجم المحتوي الداخلي فقط.
  • تجمع بين مميزات inline و block فهي تقبل التأثير الناتج عن الخصائص التالية padding و margin و height و width.

ملاحظة: لا يوجد في لغة HTML عناصر في وضعها الأفتراضي display inline-block ويمكن تحويل أي عنصر إلي وضعية display inline-block بلغة CSS عن طريق خاصية display.

خاصية display مع القيمة inline-block في لغة CSS

CSS display block without inline block

تٌعرض بعض العناصر في الوضع الطبيعي display block شاهد هذا المثال قبل تحويلها إلي display-inline في لغة CSS.

HTML 
div
{
  border:red solid 1px;
}
جرّب بنفسك

CSS display inline block

تحويل العناصر التي تٌعرض في الوضع الطبيعي display block إلي طريقة عرض مٌختلفة وهي display inline في لغة CSS.

HTML 
div
{
  border:red solid 1px;
  display:inline-block;
}
جرّب بنفسك

CSS display inline without inline block

تٌعرض بعض العناصر في الوضع الطبيعي display inline شاهد هذا المثال قبل تحويلها إلي display-inline في لغة CSS.

HTML 
span
{
  border:red solid 1px;
}
جرّب بنفسك

CSS display inline block with span

تحويل العناصر التي تٌعرض في الوضع الطبيعي display inline إلي طريقة عرض مٌختلفة وهي display inline في لغة CSS.

HTML 
span
{
  border:red solid 1px;
  display:inline-block;
}
جرّب بنفسك

جميع فقرات هذا الدرس (عرض العناصر في لغة CSS)