خاصية display في CSS | أساسيات CSS


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


سمة CSS display property

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




عناصر البلوك block

تبدأ العناصر التي تحتوي على قيمة block لسمة display دائمًا في سطر جديد وتحتل العرض الكامل لهذا الخط (تنتشر إلى أقصى اليمين واليسار قدر الإمكان). على سبيل المثال، يُنشئ العنصر <p> كتلة block تفصله عن العنصرين العلوي والسفلي. تعتبر العناوين وعلامات <div> والجداول والقوائم وعناصر القائمة أمثلة أخرى لعلامات مستوى  block.

  العنصر <div> هو عنصر سطح  block.

أمثلة على عناصر سطح  block:

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

عناصر inline (العناصر المُضمنة) 

العناصر التي لها قيمة inline لسمة  display لا تبدأ في سطر جديد وتشغل فقط مساحة بقدر ما تحتاج. إنهم يصطفون مع العناصر الأخرى. و على <strong> العلامة هي علامة inline. الكلمة المنسقة بهذه العلامة متبوعة بنصوص أخرى في سطر.

هذا عنصر  <span> داخل فقرة  .

مثال على عناصر السطح inline:

<span>
<a>
<img>

الاختلاف بين inline و block في CSS

في معظم الحالات، تتعامل CSS مع عناصر block وعناصر inline بنفس الطريقة. يمكنك تعيين الخط واللون ولون الخلفية لكلا النوعين من العناصر. ومع ذلك، عندما يتعلق الأمر بسمات margin و padding، فإن المتصفحات تتصرف بشكل مختلف قليلاً. على الرغم من أنه يمكنك استخدام الهوامش اليمنى واليسرى والمساحة المتروكة لإنشاء مساحة على الجانبين الأيمن والأيسر من العناصر، لا يمكنك تغيير ارتفاع عنصر مضمن باستخدام margin العلوية والسفلية و padding.

إذا أردنا القيام بذلك، فيمكننا استخدام قيمة inline-block لسمة display الخاصة بالعنصر المطلوب. ستحول هذه القيمة العنصر المطلوب إلى عنصر مشابه لكل من العناصر inline و block، على سبيل المثال، مثل العناصر inline، فإنها تشغل المساحة المطلوبة فقط، ومثل عناصر block، يمكن استخدام ارتفاع العنصر باستخدام margin العلوية والسفلية. padding معدلة.

None هي قيمة سمة display

display: none لا توجد عادةً JavaScript لإخفاء أو إظهار العناصر المستخدمة دون إزالتها وإعادة إنشائها.

يستخدم العنصر <script> نفسه ؛ display: none افتراضيًا.


تغيير القيمة الافتراضية لسمة display

كما ذكرنا، كل عنصر له قيمة افتراضية لسمة display. ومع ذلك يمكنك تغيير هذه القيمة الافتراضية.

يمكن أن يكون تغيير عنصر inline إلى عنصر block أو العكس لعرض الصفحات بشكل أفضل بطريقة معينة تتبع معايير الويب.

من الأمثلة الشائعة على ذلك تحويل العنصر <li> إلى عنصر inline لعرض قائمة أفقية:

li {
display: inline;
}

في المثال التالي، تم تغيير عنصر <span> إلى عنصر block:

span {
display: block;
}

في المثال أدناه، تم تغيير عنصر <a> إلى عنصر سطح block:

a {
display: block;
}

إخفاء العناصر - display: none or visibility: hidden

لإخفاء عنصر، يمكنك تعيين قيمة سمة display لهذا العنصر على none. في هذه الحالة، يتم إخفاء العنصر المطلوب:

h1.hidden {
display: none;
}

"visibility: hidden" يخفي العنصر أيضًا. ومع ذلك، لا يزال العنصر يشغل المساحة التي كان عليها قبل أن يختبئ:

h1.hidden {
visibility: hidden;
}


كلمات مفتاحية: