Showing and hiding (display) · إظهار وإخفاء (display)
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · تحتاج هذه الصفحة إلى متصفح حديث (يدعم SharedArrayBuffer). يرجى تحديث Chrome أو Edge أو Firefox أو Safari إلى أحدث إصدار.
English
How boxes flow
- Some elements are block: they stack on top of each other and fill the width —
<div>,<p>,<h1>. - Some are inline: they sit side by side, taking only as much room as they need —
<span>,<a>,<strong>. displaylets you change which way an element behaves.
العربية
كيفية تدفق الصناديق
- بعض العناصر تكون صناديق كتلية: تتراكم فوق بعضها وتملأ العرض —
<div>،<p>،<h1>. - بعضها مضمنة (inline): تجلس جنباً إلى جنب، وتأخذ فقط قدر ما تحتاج منه من مساحة —
<span>،<a>،<strong>. displayيسمح لك بـ تغيير طريقة سلوك العنصر.
English
display: none
display: none;removes an element from the page completely.- It's how menus, pop-ups, and "read more" sections stay hidden until needed.
- The element is still in your HTML — it just isn't shown.
العربية
display: none
display: none;يزيل العنصر من الصفحة تماماً.- هكذا تظل القوائم، والنوافذ المنبثقة، وأقسام "اقرأ المزيد" مخفية حتى الحاجة إليها.
- العنصر لا يزال موجوداً في كود HTML الخاص بك — بل إنه غير مرئي فقط.
<style>
.pill { display: inline; background-color: #def; padding: 6px; }
.gone { display: none; }
</style>
<span class="pill">Visible</span>
<span class="gone">You can't see me</span>
English
Common mistakes
display: noneremoves the element and its space;visibility: hiddenkeeps its space.blockstarts a new line;inlinedoes not.
العربية
أخطاء شائعة
display: noneيزيل العنصر ومساحته؛ بينماvisibility: hiddenيحتفظ بمساحته.blockيبدأ سطرًا جديدًا؛ بينماinlineلا يفعل ذلك.
English
Now you try
display: nonehides;display: blockmakes an element take its own line.- Hide one element, then change how another displays.
العربية
الآن جرب بنفسك
display: noneيخفي؛ بينماdisplay: blockيجعل العنصر يشغل سطراً مستقلاً.- أخفِ عنصراً واحداً، ثم غيّر طريقة عرض عنصر آخر.
Hide the secret message. Add .secret { display: none; }. · أخفِ الرسالة السرية. أضف .secret { display: none; }.
Make each label sit on its own line. Add .label { display: block; }. · اجعل كل تسمية تظهر في سطر خاص بها. أضف .label { display: block; }.