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

CSS display inline without problem خاصية display مع القيمة inline في لغة CSS بدون مشكله في هذه الحالات

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

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

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

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

لا تحدث أي مشكلة عند استخدام خاصية display مع القيمة inline مع خصائص padding-left و padding-right و margin-left و margin-right في لغة CSS.

CSS display inline with padding left

تعمل خاصية padding-left مع خاصية display مع القيمة inline في لغة CSS.

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

CSS display inline with padding right

تعمل خاصية padding-right مع خاصية display مع القيمة inline في لغة CSS.

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

CSS display inline with margin left

تعمل خاصية margin-left مع خاصية display مع القيمة inline في لغة CSS.

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

CSS display inline with margin right

تعمل خاصية margin-left مع خاصية display مع القيمة inline في لغة CSS.

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

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