خاصية display فى CSS

---

سيعلمك هذا الفصل خاصية display فى CSS بالتفصيل، مع بعض الأمثلة التوضيحية.

---

 

خاصية display فى CSS

 

تعد خاصية display أهم خاصية CSS للتحكم في layout الصفحة. حيث تحدد خاصية display فى CSS كيف يتم عرض عنصر ما.

لكل عنصر HTML قيمة عرض افتراضية اعتمادًا على نوع العنصر.

قيمة العرض الافتراضية لمعظم العناصر هي block أو inline.

 

مثال للتوضيح:

<style>
    div {
        display: block;
        border: 1px solid;
    }

    span {
        display: inline;
        border: 1px solid;
    }
</style>

<div>This is block element!</div><br />
<span>This is inline element!</span>

---

 

العنصر الـ Block

 

يبدأ عنصر block دائمًا على خط جديد ويأخذ العرض الكامل المتاح (يمتد إلى اليسار واليمين قدر الإمكان).

يقوم عنصر الـ block بتوليد مربع عنصر، مما يولد فواصل أسطر قبل وبعد العنصر عندما يكون في التدفق الطبيعي.

أمثلة على بعض العناصر block:

• <div>
• <p>
• <form>
• <h1> – <h6>

 

مثال على عنصر block:

<style>
    div {
        border: 1px solid;
    }
</style>

<div>Block element example!</div>

---

 

العنصر الـ Inline

 

لا يبدأ عنصر الـ inline في سطر جديد ويأخذ فقط العرض بالقدر اللازم، سيكون العنصر التالي على نفس الخط إذا كان هناك مساحة.

أمثلة على العناصر inline:

• <span>
• <a>

 

مثال على عنصر inline:

<style>
    span {
        border: 1px solid;
    }
</style>

<span>Inline element example!</span>

---

 

تغيير قيمة الـ display الافتراضية للعناصر

 

كما ذكر ، كل عنصر له قيمة عرض افتراضية، ومع ذلك يمكنك تغيير هذه القيمة، أى يمكنك تحويل العناصر الـ block إلى عناصر inline والعكس.

 

مثال للتوضيح:

<style>
    div {
        display: inline;
        border: 1px solid;
    }

    span {
        display: block;
        border: 1px solid;
    }
</style>

<div>Now this element inline!</div><br />
<span>Now this element block!</span>

---

---

 

Display none

 

يمكنك إستخدام فيمة none لإيقاف تشغيل عرض عنصر بحيث لا يكون له تأثير على layout الصفحة، ويتم تقديم المستند كما لو كان العنصر غير موجود. كالتالى:

<style>
    div {
        border: 1px solid;
    }

    div p {
        display: none
    }
</style>

<div>
    <h2>Example</h2>
    <p>Hello World!</p>
</div>

 

يمكنك أيضًا إستخدام ;visibility:hidden لإخفاء العنصر، لكن سيظل العنصر يشغل نفس المساحة كما كان من قبل (سيتم إخفاء العنصر ، ولكن لا يزال يؤثر على layout الصفحة)، على عكس ;display: none يقوم بإخفاء وإزالة العنصر نهائيًا كما لو كان غير موجود:

<style>
    div {
        border: 1px solid;
    }

    div p {
        visibility: hidden;
    }
</style>

<div>
    <h2>Visibility Example</h2>
    <p>Hello World!</p>
</div>