خاصية display مع القيمة inline في لغة CSS | عرض العناصر في لغة CSS

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

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

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

العناصر التي تكون في الوضع الأفتراضي طريقة عرضها display inline:

<span>
<a>
<img>

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

CSS display block without inlline

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

HTML

div
{
  border:red solid 1px;
}

جرّب بنفسك

CSS display inline

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

HTML

div
{
  border:red solid 1px;
  display:inline;
}

جرّب بنفسك

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

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

CSS display block without inlline

CSS display inline

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