#43 | شرح display block - inline - inline block

يمكنك مذاكرة درس ال display من هنا من هنا |
https://nouvil.net/css-play-ground/cs...
-----------------------------------


للتواصل معي :
instagram |
  / abdelrahman_noufal  
-----------------------------------
facebook |
  / abdelrahman.g.nofal  
-----------------------------------
جروب الفيسبوك الخاص بنا |
  / 1810581845642171  
-----------------------------------
خاصية CSS Display هي إحدى الخصائص الأساسية في CSS التي تسمح للمطورين بتحديد كيفية عرض العناصر في صفحة الويب. تتضمن هذه الخاصية ثلاثة قيم رئيسية هي: block و inline و inline-block.

قيمة Display Block تجعل العنصر يشغل مساحة كاملة في العرض ويبدأ عرضه من سطر جديد، ويمكن للعنصر أن يحتوي على عناصر أخرى داخله. تستخدم قيمة Display Block بشكل رئيسي لإنشاء بنية الصفحة وعرض العناصر الأساسية مثل div وsection وheader وfooter وغيرها.

قيمة Display Inline تجعل العنصر يعرض داخل سطر النص ويقتصر على مساحة المحتوى الذي يحتوي عليه، ولا يمكن للعنصر أن يحتوي على عناصر أخرى داخله. يستخدم عادةً لعرض العناصر النصية مثل الروابط والنصوص والصور.

قيمة Display Inline-block تجعل العنصر يعرض داخل سطر النص ويمكن له أن يحتوي على عناصر أخرى داخله، ولكنه لا يشغل مساحة كاملة في العرض كما في قيمة Display Block. يستخدم عادةً لعرض العناصر النصية التي تحتوي على عناصر أخرى داخلها مثل الأزرار والحاويات.

يمكن استخدام خاصية Display بشكل واسع في تصميم صفحات الويب لتحديد كيفية عرض العناصر وتنظيمها في الصفحة. عند استخدام هذه الخاصية، يجب أن يتم اختيار القيمة المناسبة بناءً على نوع العنصر والتصميم المطلوب. يجب الاهتمام بتنظيم وترتيب العناصر بطريقة مناسبة وجعلها سهلة القراءة والاستخدام للمستخدم.

عند استخدام قيمة Display Block، يجب الانتباه إلى أن العناصر ستشغل مساحة كبيرة في الصفحة، وقد يؤثر ذلك على تنظيم الصفحة وسرعة التحميل. وعند استخدام قيمة Display Inline، يجب الانتباه إلى أن العناصر لن تستطيع أن تحتوي على عناصر داخلها، وقد تؤثر ذلك على التصميم والتنظيم. وعند استخدام قيمة Display Inline-block، يجب الانتباه إلى أن العناصر قد تشغل مساحة كبيرة في الصفحة إذا تم استخدامها بشكل غير مناسب.