خاصية "display"

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

block

<div>

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

</div>

inline

عنصر span هو العنصر الأساسي الذي تكون قيمة display الخاصة به تساوي inline. أي عنصر يحمل القيمة الأخيرة يُسمى inline element. ومن خصائص هذه العناصر أنها تمكن من تضمين النصوص داخل الفقرات. <span> مثل هذا </span> من دون قطع سياق الفقرة. عنصر a هو أكثر العناصر التي تُستخدم لهذا الغرض، والتي نستخدمها بكثرة في الوصلات.

none

أحد القيم المهمة الأخرى هي none. بعض العناصر تستخدم هذه القيمة، وأشهر الأمثلة على ذلك عنصر script؛ والذي يستخدم لتضمين كود جافا سكريبت داخل الصفحات. يمكن استخدام هذه القيمة في جافا سكريبت لإخفاء، أو إظهار عناصر معينة.

يختلف ذلك عن خاصية visibility؛ حيث أننا عندما نُعيّن قيمة none لخاصية display؛ فإننا نقوم بتحميل محتوى الصفحة كما لو أن العنصر غير موجود. أما visibility: hidden;؛ فتقوم بإخفاء العنصر فقط، ويظل أثر العنصر موجودًا في الصفحة.

You found me!

قيم أخرى

هناك قيم أخرى لخاصية display. مثل قيمة list-item، و قيمة table، وقيمة table. هذه قائمة بكل قيم خاصية display. سنقوم بشرح القيمتين: inline-block، وflex لاحقًا.

ملاحظة إضافية

كما ذكرنا أعلاه؛ كل عنصر له قيمة display افتراضية. وعلى كل حال، يمكن دائمًا تغيير القيمة القديمة، بقيمة أخرى.

  • Creative Commons License