عرض CSS (العرض)

تحدد خاصية العرض display نوع الصندوق الذي ينتجه العنصر، وتستخدم القيم العادة للعرض مثل block، none، inline.

خصائص عرض CSS

تحدد معايير CSS القيمة الافتراضية لجميع العناصر، مثل العنصر <div> يظهر كحزمة، بينما العنصر <span> يظهر كعرض داخلي.

تغيير القيمة الافتراضية لعرض

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

يُشرح هذا الجزء الأكثر شيوعًا من قيم عرض CSS.

عرض المستقل (Block)

قيمة block الخاصية display تجبر سلوك العنصر لتكون مثلالمستقلةالعناصر مثل<div>أو<p>العنصر. ستكون النصائح النمطية التالية<span>و <a>يُعرض العنصر كعنصر مستقل

span {
　　　　display: block;
}
a {
　　　　display: block;
}

عرض المرتبطة (inline)

قيمة inline الخاصية display تجعل سلوك العنصر يشبهالمرتبطةالعنصر مثل<span>أو<a>العنصر. ستكون النصائح النمطية التالية<p>و <li>يُعرض العنصر كعنصر مرتبط

p {
　　　　display: inline;
}
ul li {
　　　　display: inline;
}

عرض الحجرة المرتبطة (inline-block)

قيمة inline-block الخاصية display تجعل العنصر ينتج صندوقًا مستطيلاً يتحرك مع المحتوى المحيط، أي في نفس السطر مع المحتوى المتجاور. ستكون النصائح النمطية التالية<div>و <span>يُعرض العنصر كحجرة مرتبطة

div {
　　　　display: inline-block;
}
span {
　　　　display: inline-block;
}

لا يُعرض (none)

عندما تكون قيمة الخاصية display none، لا يُنتج العنصر أي صندوق، ولا يُعرض على الصفحة. لن يُنتج أي صندوق للأبناء، حتى لو كانت خاصية العرض الخاصة بهم غير

h1 {
　　　　display: none;
}
p {
　　　　display: none;
}