ما هي خاصية display
؟
تُعد display
واحدة من أهم خصائص CSS لأنها تحدد كيف يظهر العنصر على الصفحة، أي شكل عرضه بالنسبة للعناصر الأخرى.
أشهر القيم المستخدمة مع display
:
القيمة | الوصف |
---|---|
block |
يعرض العنصر كـ كتلة كاملة، يأخذ كامل عرض الصفحة |
inline |
يعرض العنصر ضمن السطر بدون كسر سطر |
inline-block |
مزيج من inline و block : يبقى بالسطر لكن يسمح بتحديد عرض وارتفاع |
none |
يُخفي العنصر تمامًا |
flex |
يعرض العنصر كـ flex container (سنتحدث عنه بالتفصيل لاحقًا) |
أمثلة عملية:
1. block
و inline
:
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: block;
background-color: #d1e7dd;
padding: 10px;
margin-bottom: 10px;
}
span {
display: inline;
background-color: #f8d7da;
padding: 5px;
}
</style>
</head>
<body>
<p>هذا عنصر block</p>
<p>أي يأخذ سطرًا كاملًا</p>
<span>هذا عنصر inline</span>
<span>وهذا أيضًا inline</span>
</body>
</html>
2. inline-block
:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: inline-block;
width: 150px;
height: 100px;
background-color: #cfe2ff;
margin: 5px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</body>
</html>
3. none
:
.hidden {
display: none;
}
<p class="hidden">لن يظهر هذا النص على الصفحة</p>
استخدامات شائعة:
- إخفاء العناصر:
display: none
- بناء القوائم:
display: block
أوinline-block
- تصميم الأعمدة أو الصفوف:
display: flex
(سنفصّله لاحقًا) - التحكم في العناصر داخل النماذج أو الأزرار.
الفرق بين visibility: hidden
و display: none
:
display: none
يخفي العنصر بالكامل ويزيله من التخطيط.visibility: hidden
يخفي العنصر لكنه يظل يحتجز مساحته في الصفحة.
الواجب العملي:
- أنشئ عناصر
<div>
و<span>
وجرب تغيير قيمdisplay
بينها. - جرّب إخفاء عنصر باستخدام
display: none
ثم أعده باستخدام JavaScript لاحقًا. - جرّب الفرق بين
inline
وinline-block
من حيث التحكم في العرض والارتفاع.