السلام عليكم ورحمة الله ..
لقد كنت أعاني من مشكلة في فهم الـ Display بشكل عام , فـ لم أكن أعلم لماذا أستخدمها أو ماذا تختلف كل خاصية عن الأخري
ولكن عندما تعمقت في الموضوع وجدت إنها سهله جداً
display :none
وهذه تقوم بإخفاء العنصر من مكانة في الصفحة بشكل عام , ولا تحتفظ بمكان العنصر في الصفحة وتستبدلة بالعنصر الذي أسفلة
display: inline
هذه الخاصية حيرتني بعض الشئ , ولكن وجدت أنها لا تحترم الـ Height + width
ولا تحترم الـ padding , ولكنها تحترم الـ margin left & right فقط
display: block
وتقوم هذه الخاصية بتحويل العنصر من inline إلي block , أي إنها تقوم بوضع العنصر في سطر جديد
وهذه الخاصية تحترم الـ height + width + padding + margin
display: inline-block
وهذه الخاصية تقوم بتحويل العنصر إلي inline مع خصائص الـ block
أي إنها ستؤدي نفس وظيفة الـ inline , لكنها سوف تحترم الخصائص المعطاة للعنصر كـالـ block
" width + height + padding + margin "
ويمكنك النظر لهذا المثال لتفهم الخاصية بشكل كبير
http://codepen.io/GawiSh/pe...حسناً , دعنا نراجع بعض المعلومات
none , = يخفي العنصر
inline , = يضع العنصر علي خط أفقي ولا يحترم الخواص مثل الطول والعرض , الخ ..
block , = يضع كل عنصر في سطر جديد , ويحترم الخواص مثل الطول والعرض ، الخ ..
inline-block , = يقوم بوضع العناصر علي خط أفقي كالـ inline و إعطاءة إحترام الخواص مثل الـ block
أتمني أن يكون الشرح مفهوم للجميع , وشكراً
التعليقات