السلام عليكم

خاصيه Display وتعنى طريقه عرض العنصـر فى صفحـه البراوزر

وللخـاصيه 4 قيــم :

الاولى : none وتعنى اخفاء العنصر تماما من الصفحه

الثانية : inline بمعنى ان تقوم العناصر المعطى لهم هذه القيم بالمجىء بجانب بعضهم البعض

الثالثه : block بمعنى العناصر تيجـى تحت بعض

الرابعه : inline-block وهى دمج ميزه من ال inline و block

دعنى نتطرق بشرح أكثر دقه وتفصيلا وبأمثله لكل قيـمة

1) القيمــة none وتعنى اخفـاء العنصـر تماما من الصفحه وما يلى هذا العنصر يأتى مكانه

شاهد هذا المثـال لتفهم ما اقصد بالتفصيـل

http://codepen.io/anon/pen/...

2) القيـمة inline وتعنى ان العنـاصر تاتى بجوار بعضها البعض فى نفس السطر

مع مراعااااة !! ان العنـاصر ال inline لا يمكن أبداً اعطائها الاتى :

width

height

margin-top

margin-bottom

padding-top

padding-bottom ف بعض الاحيـان تعمل

اما بالنسبه ل margin-right و margin-left و padding-right و padding-left

يعملان مع قيمـة inline

دعنى نرى المثـال وستفهم بالتفصيل ما اقصد ( غير القيم وستشاهد التاثير )

http://codepen.io/anon/pen/...

3) القيمة block وتعنى ان العناصر تاتى تحت بعضها البعض ... قبلها وبعدها

مع مراعاااه !! ان العناصر ال block عكس ال inline تماما

يمكنك اعطائها :

width

height

margin من جميع الجوانب

padding من جميع الجوانب

مع العلم انه فى حين عدم اعطائك للعنصر width معين .. يكون ال width دائما 100%

شاهد المثال

http://codepen.io/anon/pen/...

وهذا هو الفرق بين العناصر ال block و inline

هو انه يمكن اعطاء طول عرض ومارجين وبادينج للعناصر البلوك فى حين لا يمكن للعناصر ال inline

كما ذكرت مسبقــااا

سؤال يمكن الاستفسار عنه وهو كيف اعرف العناصر block أم inline بدون حفظها ؟

ببساطه شديده جداا .. عن طريق ال background بمعنى

لو اعطيب العنصر background معينه وتاثيرها كان انها خدت ال width 100% مثل ذلك

فاعلم ان هذه العنصر هو عنصر block ... مثال على heading tag شاهد المثال ↓

http://codepen.io/anon/pen/...

سترى ان الخلفيه جااااءت بعرض الشاشه تمااما لهذه العناصر مع العلم انى لم اعطى عرض معين

فى ذلك الحين تعلم انه هذه العناصر block

على عكس ال inline .. ايضا تقوم باعطاء العناصر المراد معرفته هل هو inline ام block

خاصيه ال background .. لكن فى هذا الحاله لو جاءت لون الخلفيه على الكلام المكتوب

فقط بدون ان تاخد عرض الشاشه كاملا .. فهذه العناصر تكون inline

شاهد المثال

http://codepen.io/anon/pen/...

سترى ان الخلفيه جاءت على قد المحتوى المكتوب داخل التاج فقط

مما يعنى ان هذه العناصر تكون inline

4) القيمه الاخيرة وهى inline-block

تعنى ادماج مميزات القيمه inline ومميزات القيمه block

فميزة ال inline ان العناصر تيجى بجوار بعضها البعض

وميزة ال block ان العناصر تقدر تتحكم فى الطول والعرض والمارجين والبادينج

لكل كل قيمه على حده لا تفعل ذلك ..

واشهر مثال على هذا القيمه هو النافبـار .. شاهد المثال

http://codepen.io/anon/pen/...

وجدنا انه عند اعطاء القيمه inline-block جاءت جميع ال li بجوار بعضها البعض

بالاضافه الى انه استطعنا التحكم فى الطول والعرض والمارجين والبادينج

وهذا لا يحدث باسخدام كل خاصيه على حده

يمكنك تحويل العناصر بمعنى مثلا عندك 3 div وهما عناصر بلوك

اذا اردت تحويلهم الى عناصر inline فقم بكتابه خاصيه ال display : inline للديف

حينها بتحول من عنصر بلوك الى inline والعكس صحيح

الى هنا تم الانتهاء تماما من هذا الخاصيـة

اتمنى يكون الشرح واضح وكافى ... ويكون مفيد ليكم وجزاكم الله خيرا والسلام عليكم ورحمه الله