display inline block

خاصية display، من أهم الخصائص التي يجب معرفتها في في CSS، وخصوصا بالنسبة للمصممين للواجهات.حيث ان هده الخاصية تعطي كيفية عرض العنصر  حيث أنه لكل عنصر في الموقع يحتوي على خاصية display افتراضية خاصة به ، وتعتمد قيمة الخاصية على العنصر نفسه . القيمة الافتراضية لمعظم العناصر هي block، أو inline.

خاصية dispaly  لديها 4 قيـم  مختلفة

• القيمة : none تعنى اخفاء العنصر تماما من الصفحه ولكنه موجود حيث لايظهر للمستخدم بالمتصفح
• القيمة : inline بمعنى ان  العنصر دو هده القيمة يتم عرضه  بجانب العنصر الدي بجانبه 

<u>hello </u><strong>world</strong>   

   من أهم العناصر التي تدعم هده الخاصية بشكل افتراضي هي strong , u , i , em , span, code , sup  واغلبها هي عناصر نصية أي انه يتم حشوها داخل الفقرات والنصوص ..فمثلا ليس من المعقول انك تضع display block  بعنصر <u>  مثلا الدي يسمح بوضع خط تحت الجملة  بداخل النص..

هده الكتابة خطأ <span>hello <u style="display:block">world</u>   

العناصر التي تحمل قيمة inline لا يمكنها أن تتجاوب مع الخصائص التالية margin-top margin-bottom height width padding-toppadding-bottom

• القيمة : block بمعنى العناصر تعرض تحت بعضها البعض  وأفضل مثال على هده القيم هو div حيث ان وضع عنصرين من ال div مثلا يتم عرضها واحدة تلو الاخرى وليس بجانب بعض  من أهم مميزات هده  العناصر التي تمتلك هذه الخاصية أنها تمتد من أقصى يمين نافذة المتصفح، إلى أقصى اليسار. ومن الأمثلة  على هذه العناصر  p، form ، section، footer، header، div ،article

<div> .content 1</div> 
<div> .content 2</div> 

• القيمة : inline-block وهى دمج ميزه من ال inline و block