Width and centering · רוחב ומיקום במרכז
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
Width
- By default, a block box is as wide as the page.
width: 300px;makes it a fixed width instead.max-width: 600px;is gentler — at most this wide, but shrink on small screens.
עברית
רוחב
- ברירת מחדל, קופסת בלוק היא ברוחב הדף כולו.
width: 300px;הופך אותו לרוחב קבוע.max-width: 600px;עדין יותר — מקסימום רוחב זה, אך הצטמצות במסכים קטנים.
English
Centering a box
- To center a box (not just its text), give it a width, then
margin: 0 auto;. 0 automeans no top/bottom margin, and equal left/right margins.- Equal side margins push the box into the middle.
עברית
מרכזת תיבה
- כדי למרכז תיבה (ולא רק את הטקסט שלה), תן לה רוחב, ואז
margin: 0 auto;. 0 autoאומר אין שולי עליון/תחתון, ושולי שווים שמאל/ימין.- שולי צד שווים דוחפים את התיבה למרכז.
<style>
.card {
width: 280px;
margin: 0 auto;
padding: 16px;
background-color: #eef;
}
</style>
<div class="card">A centered card.</div>
English
Common mistakes
- Centre a block with a set width using
margin: 0 auto. - A width in
%is relative to the parent element.
עברית
טעויות נפוצות
- מרכז בלוק עם רוחב קבוע באמצעות
margin: 0 auto. - רוחב ב-
%הוא ביחס לאלמנט ההורה.
English
Now you try
- A box needs a width before
margin: 0 auto;can center it. - Set a width, then center the card.
עברית
כעת תנסו בעצמכם
- לתיבה יש צורך ברוחב לפני ש-
margin: 0 auto;יכול למרכז אותה. - הגדר רוחב, ואז מרכז את הכרטיס.
Explore · חקור
Width and the box · רוחב והתיבה
Width sets the content size; padding/border/margin add around it. · רוחב קובע את גודל התוכן; פדינג/גבול/שוליים מתוסיפים סביבו.
Give the card a fixed width. Add width: 300px; to the .card rule. · תן לכרטיס רוחב קבוע. הוסף width: 300px; לכלל .card.
Center the card on the page. Add margin: 0 auto; to the .card rule. · מקם את הכרטיס במרכז הדף. הוסף margin: 0 auto; לכלל .card.