The box model · מודל הקופסה
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
Every box has layers
- CSS treats every element as a box.
- Content is your text or image. Padding is space inside, around the content.
- Border is a line around the padding. Margin is space outside, pushing other boxes away.
עברית
לכל קופסה יש שכבות
- CSS מטפלת בכל אלמנט כקופסה.
- תוכן הוא הטקסט או התמונה שלך. Padding הוא מרווח פנימי, סביב התוכן.
- Border הוא קו סביב ה-padding. Margin הוא מרווח חיצוני, המרחיק קופסאות אחרות.
English
Padding and border
padding: 20px;adds 20 pixels of space inside, on all four sides.border: 2px solid black;draws a line — its width, style, then colour.- Padding makes a box feel roomy; a border makes it stand out.
עברית
Padding ו-border
padding: 20px;מוסיף 20 פיקסלים של מרווח פנימי, בכל ארבעת הצדדים.border: 2px solid black;מצייר קו — את ה-עובי, ה-סגנון ולאחר מכן את ה-צבע.- Padding גורם לקופסה להרגיש רחבה; border גורם לה להבליט.
<style>
.card {
background-color: #eef;
padding: 16px;
border: 2px solid #88a;
}
</style>
<div class="card">A comfy padded card.</div>
English
Common mistakes
- The box model is content, then padding, then border, then margin (inside to outside).
- Padding adds space inside the border.
עברית
טעויות נפוצות
- דגם הקופסה הוא תוכן, לאחריו padding, אחר כך border, ואז margin (מהפנים החוצה).
- Padding מוסיף מרווח בתוך ה-border.
English
Now you try
- Padding is inside; the border sits around it.
- Add padding to a box, then a border.
עברית
כעת תנסו בעצמכם
- Padding הוא פנימי; ה-border יושב סביבו.
- הוסף padding לקופסה, ואז הוסף border.
Explore · חקור
The CSS box model · מודל קופסת CSS
Every box is content + padding + border + margin around it. · כל קופסה מורכבת מתוכן + רפידה + גבול + שוליים סביבה.
Give the box some breathing room inside. Add padding: 20px; to the .box rule. · תן לקופסה מרחב פנימי. הוסף padding: 20px; לכלל .box.
Draw a line around the box. Add border: 2px solid navy; to the .box rule — keep the three parts in that order: width, style, colour. · צייר קו סביב הקופסה. הוסף border: 2px solid navy; לכלל .box — שמור על שלושת החלקים בסדר זה: רוחב, סגנון, צבע.