תיעוד CSS עם דוגמאות להרצה: Width ו-Height

Q: מה ההבדל בין width: 100% ל-width: auto?

באלמנט בלוק, auto ממלא את הקונטיינר כולל ה-padding וה-border שלו. width: 100% קובע את רוחב התוכן לרוחב הקונטיינר, ולכן עם ברירת המחדל box-sizing: content-box כל padding או border גורם לאלמנט לגלוש החוצה.

Q: מה ההבדל בין width ל-max-width?

width קובע גודל מדויק. max-width קובע גבול עליון: האלמנט יכול להיות צר יותר, למשל בטלפון, אבל אף פעם לא רחב יותר. width: 100%; max-width: 600px; ממלא מסכים קטנים ועוצר ב-600px במסכים גדולים.

Q: איך גורמים לאלמנט להיות בגובה המסך המלא?

השתמשו ב-min-height: 100vh (או ב-100dvh כדי שסרגלי הכלים של הדפדפן בנייד יילקחו בחשבון). min-height ולא height מאפשר לאזור לגדול אם התוכן שלו גבוה יותר מהמסך.

הגדרת width ו-height

width ו-height קובעים את הגודל של תיבת התוכן של אלמנט. כברירת מחדל, ה-padding וה-border מתווספים מחוץ לגודל הזה.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Width and height</title>
  <style>
    .box {
      width: 240px;
      height: 80px;
      background: #2563eb;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="box" id="box"></div>
  <script>
    const box = document.getElementById('box');
    box.textContent = 'width 240px + padding = ' + box.offsetWidth + ' x ' + box.offsetHeight + 'px';
  </script>
</body>
</html>

התיבה היא 260 על 100 פיקסלים: 240 על 80 של תוכן ועוד 10px של padding בכל צד. עם box-sizing: border-box היא הייתה בדיוק 240 על 80; הדף על מודל התיבה מסביר את שתי האפשרויות.

ערכים

ערך	דוגמה	משמעות
`auto`	`width: auto`	ברירת המחדל. בלוקים ממלאים את רוחב הקונטיינר שלהם; הגובה מתאים את עצמו לתוכן
אורך	`300px`, `20rem`	גודל קבוע
אחוז	`50%`	מהרוחב (ל-`width`) או מהגובה (ל-`height`) של הבלוק המכיל
יחידות viewport	`100vh`, `50vw`, `100dvh`	מחלון הדפדפן
`min-content`	`width: min-content`	צר ככל האפשר, המילה הארוכה ביותר קובעת
`max-content`	`width: max-content`	רחב כמו התוכן בשורה אחת
`fit-content`	`width: fit-content`	כמו `max-content`, אבל אף פעם לא רחב יותר מהקונטיינר

למה height: 100% לא עושה כלום

height באחוזים צריך הורה עם גובה מוגדר כדי להיות אחוז ממנו. כשהגובה של ההורה הוא auto, שזה המצב הרגיל, גם height: 100% של הילד מתנהג כמו auto.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height 100%</title>
  <style>
    .parent { background: #e5e7eb; padding: 6px; margin-bottom: 12px; display: flow-root; }
    .fixed { height: 120px; }
    .child { height: 100%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Parent height auto: 100% is ignored</div>
  </div>
  <div class="parent fixed">
    <div class="child">Parent height 120px: 100% works</div>
  </div>
</body>
</html>

הילד הראשון גבוה רק כמו הטקסט שלו. השני ממלא את ההורה שלו כי להורה יש גובה. כדי ששרשרת של אחוזים תעבוד לאורך כל הדף, לכל אב עד html ו-body צריך להיות גובה, ולכן רוב הפריסות משתמשות במקום זה ב-flexbox או ב-grid: הילדים שלהם נמתחים למלא את המקום בלי שום אחוז.

min-height ו-max-width: גדלים גמישים

גדלים קבועים נשברים בקלות: גובה קבוע גולש כשהטקסט ארוך מהצפוי, ורוחב קבוע רחב מדי לטלפון. המאפיינים min- ו-max- קובעים גבולות במקום גדלים מדויקים.

מאפיין	משמעות
`min-width`	אף פעם לא צר יותר מזה
`max-width`	אף פעם לא רחב יותר מזה
`min-height`	אף פעם לא נמוך יותר מזה, אבל יכול לגדול
`max-height`	אף פעם לא גבוה יותר מזה (תוכן עודף גולש)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    .card {
      max-width: 360px;   /* narrower on small screens, never wider */
      min-height: 50px;   /* at least 50px, grows with content */
      border: 2px solid #2563eb;
      padding: 10px;
      margin-bottom: 12px;
    }
    .fixed {
      max-width: 360px;
      height: 50px;       /* fixed: long text spills out */
      border: 2px solid #f59e0b;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="card">Short card: the 50px minimum.</div>
  <div class="card">A card with much more text. It keeps its 360px limit but grows taller, because min-height sets a floor, not a fixed size. The border stays around all of the text, however many lines there are. Add another sentence here and the card simply gets taller again.</div>
  <div class="fixed">A fixed height of 50px with long text. The text no longer fits, so it spills past the amber border and over whatever comes next on the page. A fixed height cannot know how long the text will be, or how large the reader has set the font.</div>
</body>
</html>

במסך צר מ-360px, כמו בטלפון, הכרטיסים מתכווצים יחד איתו, כי max-width הוא רק תקרה.

כשגם גודל וגם גבול חלים, הגבולות מנצחים: max-width גובר על width, ו-min-width גובר על max-width.

width: auto מול width: 100%

באלמנט בלוק, להשאיר את width על auto הוא כמעט תמיד מה שאתם רוצים. auto מכניס את כל התיבה, כולל ה-padding וה-border, לתוך הקונטיינר. 100% הופך את התוכן לרחב כמו הקונטיינר ואז מוסיף מעליו את ה-padding וה-border:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto vs 100%</title>
  <style>
    .container { width: 300px; background: #e5e7eb; padding: 8px 0; }
    .item { padding: 10px; border: 3px solid #2563eb; margin: 6px 0; }
    .auto { width: auto; }
    .full { width: 100%; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item auto">width: auto, fits</div>
    <div class="item full">width: 100%, overflows</div>
  </div>
  <p id="out"></p>
  <script>
    const w = (s) => document.querySelector(s).offsetWidth;
    document.getElementById('out').textContent =
      'container 300px, auto ' + w('.auto') + 'px, 100% ' + w('.full') + 'px';
  </script>
</body>
</html>

width: 100% עדיין שימושי באלמנטים שהם לא בלוקים כברירת מחדל (<input>, <img>, inline-block), רצוי יחד עם box-sizing: border-box.

התאמת הגודל לתוכן: fit-content

כדי שבלוק יהיה רחב רק כמו הטקסט שלו, בלי להפוך אותו ל-inline-block, השתמשו ב-fit-content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fit-content</title>
  <style>
    div { background: #16a34a; color: white; padding: 6px 10px; margin-bottom: 8px; }
    .fit { width: fit-content; }
    .min { width: min-content; }
  </style>
</head>
<body>
  <div>auto: full width</div>
  <div class="fit">fit-content: as wide as the text</div>
  <div class="min">min-content: one word per line</div>
</body>
</html>

fit-content יחד עם margin-inline: auto ממרכז תווית או בלוק שנראה כמו כפתור, שנשאר רחב בדיוק כמו הטקסט שלו.

אזורים בגובה מלא ויחידות viewport

vh הוא 1% מגובה ה-viewport ו-vw הוא 1% מהרוחב שלו. בטלפונים, שורת הכתובת של הדפדפן גדלה ומתכווצת בזמן הגלילה, ולכן 100vh יכול להיות גבוה יותר ממה שרואים. היחידה הדינמית dvh עוקבת אחרי האזור הגלוי, ו-svh משתמשת בגובה הגלוי הקטן ביותר:

.hero {
  min-height: 100vh;  /* fallback */
  min-height: 100dvh; /* follows mobile toolbars */
}

השתמשו ב-min-height ולא ב-height לאזורים במסך מלא, כך שגם מסך קטן עם הרבה טקסט יקבל אזור שגדל. גובה קבוע עם תוכן שלא נכנס בו גולש החוצה, ובזה מטפל הדף על CSS overflow.

טעויות נפוצות

height: 100% בתוך הורה בלי גובה. הוא מתנהג כמו auto. תנו להורה גובה או השתמשו ב-flex או ב-grid.
width: 100% יחד עם padding. האלמנט גולש מהקונטיינר שלו. השאירו רוחב של בלוקים על auto, או השתמשו ב-box-sizing: border-box.
גובה קבוע לקונטיינרים של טקסט. השתמשו ב-min-height כדי שטקסט ארוך יותר או גופן גדול יותר לא יגלשו החוצה.
width על אלמנט inline. <span> ו-<a> מתעלמים מ-width ומ-height; הפכו אותם ל-inline-block או ל-block.
width: 1200px על עוטף הדף. הוא נגלל הצידה בכל טלפון. השתמשו במקום זה ב-max-width: 1200px.

שאלות נפוצות

למה height: 100% לא עובד?

גובה באחוזים הוא אחוז מהגובה של ההורה, והוא עובד רק כשהגובה הזה מוגדר. אם הגובה של ההורה הוא auto (נקבע לפי התוכן שלו), האחוז מטופל כ-auto. תנו להורה גובה, או השתמשו ב-flexbox או ב-grid, שמותחים את הילדים בלי אחוזים.

מה ההבדל בין width: 100% ל-width: auto?

באלמנט בלוק, auto ממלא את הקונטיינר כולל ה-padding וה-border שלו. width: 100% קובע את רוחב התוכן לרוחב הקונטיינר, ולכן עם ברירת המחדל box-sizing: content-box כל padding או border גורם לאלמנט לגלוש החוצה.

מה min-height עושה ב-CSS?

הוא קובע את הגובה המינימלי שאלמנט יכול לקבל, ועדיין מאפשר לו לגדול עם התוכן שלו. min-height: 200px נותן לכרטיס ריק 200px, וכרטיס עם יותר טקסט נהיה גבוה יותר במקום לגלוש, דבר ש-height קבוע לא היה מאפשר.

מה ההבדל בין width ל-max-width?

width קובע גודל מדויק. max-width קובע גבול עליון: האלמנט יכול להיות צר יותר, למשל בטלפון, אבל אף פעם לא רחב יותר. width: 100%; max-width: 600px; ממלא מסכים קטנים ועוצר ב-600px במסכים גדולים.

איך גורמים לאלמנט להיות בגובה המסך המלא?

השתמשו ב-min-height: 100vh (או ב-100dvh כדי שסרגלי הכלים של הדפדפן בנייד יילקחו בחשבון). min-height ולא height מאפשר לאזור לגדול אם התוכן שלו גבוה יותר מהמסך.

מושגים קשורים