السلام عليكم ورحمة الله ..

لقد كنت أعاني من مشكلة في فهم الـ 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/pen/QpYwmz

حسناً , دعنا نراجع بعض المعلومات

none , = يخفي العنصر

inline , = يضع العنصر علي خط أفقي ولا يحترم الخواص مثل الطول والعرض , الخ ..

block , = يضع كل عنصر في سطر جديد , ويحترم الخواص مثل الطول والعرض ، الخ ..

inline-block , = يقوم بوضع العناصر علي خط أفقي كالـ inline و إعطاءة إحترام الخواص مثل الـ block

أتمني أن يكون الشرح مفهوم للجميع , وشكراً