Showing and hiding (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>. - חלקם הם אינליין: הם יושבים זה לצד זה, תוך לקיחה רק של כמות המקום שהם צריכים —
<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; }.