תכונות CSS הקשורות למודל תיבת ה-CSS

Articles

מאמר זה מסביר את תכונות ה-CSS הקשורות למודל התיבה.

תוכלו ללמוד על מקרי השימוש והתצורה של תכונות כגון רוחב, גובה ושוליים.

YouTube Video

HTML לתצוגה מקדימה

css-box.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>Box Model Related CSS Properties</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-box.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Model Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Model Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>width and height</h3>
 23            <section>
 24                <header><h4>width: 250px; height: 150px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="width-height-fixed">Fixed size(250px,150px)</div>
 27                </section>
 28            </section>
 29            <section>
 30                <header><h4>width: 50%; height: 50%;</h4></header>
 31                <section class="sample-view">
 32                    <div class="width-height-percent">Percentage size(50%,50%)</div>
 33                </section>
 34            </section>
 35            <section>
 36                <header><h4>width: min-content; height: min-content;</h4></header>
 37                <section class="sample-view">
 38                    <div class="width-height-min-content">This is an example of min-content.</div>
 39                </section>
 40            </section>
 41            <section>
 42                <header><h4>width: max-content; height: max-content;</h4></header>
 43                <section class="sample-view">
 44                    <div class="width-height-max-content">This is an example of max-content.</div>
 45                </section>
 46            </section>
 47            <section>
 48                <header><h4>width: fit-content; max-width: 150px;</h4></header>
 49                <section class="sample-view">
 50                    <div class="width-height-fit-content">This is an example of fit-content.</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>margin and padding</h3>
 56            <section style="height: auto;">
 57                <h4>Margin &amp; padding</h4>
 58                <header><h4>margin: 20px; padding: 15px;</h4></header>
 59                <section class="sample-view">
 60                    <div class="margin-padding">margin & padding</div>
 61                </section>
 62            </section>
 63            <section style="height: auto;">
 64                <h4>Margin only(no padding)</h4>
 65                <header><h4>margin: 20px; padding: 0;</h4></header>
 66                <section class="sample-view">
 67                    <div class="margin-only">margin only</div>
 68                </section>
 69            </section>
 70            <section style="height: auto;">
 71                <h4>No margin &amp; padding example</h4>
 72                <header><h4>margin: 0; padding: 0;</h4></header>
 73                <section class="sample-view">
 74                    <div class="no-margin">no margin & padding</div>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>box-sizing</h3>
 80            <section style="height: auto;">
 81                <header><h4>box-sizing: content-box</h4></header>
 82                <section class="sample-view">
 83                    <div style="width: 300px;">width: 300px</div>
 84                    <div class="content-box">Content Box</div>
 85                    <div style="width: 360px;">width: 360px</div>
 86                </section>
 87            </section>
 88            <section>
 89                <header><h4>box-sizing: border-box</h4></header>
 90                <section class="sample-view">
 91                    <div style="width: 300px;">width: 300px</div>
 92                    <div class="border-box">Border Box</div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>visibility</h3>
 98            <section>
 99                <header><h4>visibility: visible</h4></header>
100                <section class="sample-view">
101                    <div class="visibility-visible">Visible Box</div>
102                </section>
103                <header><h4>visibility: hidden</h4></header>
104                <section class="sample-view">
105                    <div class="visibility-hidden">Hidden Box</div>
106                </section>
107                <header><h4>visibility: collapse</h4></header>
108                <section class="sample-view">
109                    <div class="visibility-collapse">Collapsed Box (Hold layout space)</div>
110                </section>
111                <header><h4>HTML</h4></header>
112                <pre>&lt;div class="visibility-collapse"&gt;Collapsed Box (Hold layout space)&lt;/div&gt;</pre>
113                <header><h4>visibility: collapse</h4></header>
114                <section class="sample-view">
115                    <table style="height: 200px; margin: auto;">
116                        <tr class="visibility-collapse">
117                            <td>Cell 1 (Remove layout space)</td>
118                        </tr>
119                        <tr>
120                            <td>Cell 2</td>
121                        </tr>
122                    </table>
123                </section>
124                <header><h4>HTML</h4></header>
125<pre>
126&lt;table style="height: 200px; margin: auto;"&gt;
127    &lt;tr class="visibility-collapse"&gt;
128        &lt;td&gt;Cell 1 (Remove layout space)&lt;/td&gt;
129    &lt;/tr&gt;
130    &lt;tr&gt;
131        &lt;td&gt;Cell 2&lt;/td&gt;
132    &lt;/tr&gt;
133&lt;/table&gt;
134</pre>
135            </section>
136        </article>
137    </main>
138</body>
139</html>

קשור למודל התיבה

תכונות `width` ו-`height`

 1.width-height-fixed {
 2    width: 250px;
 3    height: 150px;
 4    background-color: lightblue;
 5}
 6
 7.width-height-percent {
 8    width: 50%;
 9    height: 50%;
10    background-color: lightblue;
11}
12
13.width-height-min-content {
14    width: min-content;
15    height: min-content;
16    background-color: lightblue;
17}
18
19.width-height-max-content {
20    width: max-content;
21    height: max-content;
22    background-color: lightblue;
23}
24
25.width-height-fit-content {
26    width: fit-content;
27    max-width: 150px;
28    background-color: lightblue;
29}

תכונות ה-width ו-height הן תכונות CSS המשמשות לקביעת הרוחב והגובה של אלמנט. תכונות אלו משמשות במיוחד לקביעת גודלם של אלמנטים בלוקיים, תמונות, סרטונים וכו'.

במחלקה width-height-fixed נקבעים ערכים קבועים עבור רוחב וגובה.
במחלקה width-height-percent נקבעים ערכים באחוזים עבור רוחב וגובה.

ערכים שניתן להגדיר

לתכונות width ו-height ניתן להגדיר את הערכים הבאים.

auto: גודל ברירת מחדל. מתאים את הגודל אוטומטית ביחס לאלמנט ההורה.
ערכים קבועים: מגדיר רוחב קבוע בפיקסלים, באחוזים או ביחידות יחסיות.(ex: 100px, 50%, 10rem)
- לדוגמא, 250px מגדיר את גודל האלמנט ל-250 פיקסלים, ו-50% מגדיר אותו ל-50% מגודל אלמנט ההורה.
min-content: מתאים לגודל המינימלי של התוכן.
max-content: מתאים לגודל המרבי של התוכן.
fit-content: מתאים את גודל האלמנט בהתאם לגודל התוכן.

הגדרת ערכים מינימליים ומקסימליים

התכונות min-width, max-width, min-height, ו-max-height הן תכונות CSS המשמשות להגדרת הגבלות גודל ביחס לרוחב ולגובה של אלמנט. בעזרת תכונות אלו, ניתן להבטיח שאלמנט יהיה בטווח גודל מסוים.

תכונות `margin` ו-`padding`

 1.margin-padding {
 2    margin: 20px; /* Margin outside the element */
 3    padding: 15px; /* Padding inside the element */
 4    border: 1px solid #333;
 5    background-color: lightblue;
 6    width: 300px;
 7    height: 40px;
 8}
 9
10.margin-only {
11    margin: 20px; /* Margin outside the element */
12    padding: 0; /* No padding inside the element */
13    border: 1px solid #333;
14    background-color: lightblue;
15    width: 300px;
16    height: 40px;
17}
18
19.no-margin {
20    margin: 0; /* No margin outside the element */
21    padding: 0; /* No padding inside the element */
22    border: 1px solid #333;
23    background-color: lightblue;
24    width: 300px;
25    height: 40px;
26}

margin ו-padding הן תכונות ב-CSS שמשמשות לשליטה במרווח החיצוני והפנימי של אלמנטים בתוך מודל הקופסה. הן משמשות להתאמת המרווח בין אלמנטים ולסידור הנראות.

במחלקת margin-padding, מוגדרים גם margin וגם padding. יש מרווח margin מחוץ לגבול המוצק ומרווח padding בתוך הגבול המוצק.
במחלקת margin-only, מוגדר רק margin. ניתן לראות שהאזור הכחול קטן יותר בהשוואה למחלקת margin-padding, מכיוון שאין מרווח padding בתוך הגבול המוצק.
במחלקת no-margin, גם margin וגם padding מוגדרים ל-0. ניתן לראות שהאזור הכחול נדחף עד לקצה השמאלי, מכיוון שאין מרווח margin מחוץ לגבול המוצק.

כך, תכונת margin מגדירה את המרווח החיצוני של אלמנט ומתאימה את המרחק בין אלמנטים. מצד שני, תכונת padding מגדירה את המרווח הפנימי של אלמנט ומתאימה את המרחק בין התוכן לבין הגבול.

תכונת `margin`

תכונת margin מגדירה את המרווח החיצוני (margin) של אלמנט. היא משמשת ליצירת מרווח בין אלמנטים סמוכים. הערכים הבאים יכולים להיות מצוינים:.
ערכים קבועים: ניתן להגדיר את גודל המרווח בפיקסלים, יחידות יחסיות (em, rem), או אחוזים.(ex: 10px, 1em, 5%)
auto: שימושי למרכז אלמנטים בלוק. כאשר מוגדרת הרוחב, הוא מתאים באופן אוטומטי את המרווחים בצדדים שמאל וימין.
ערכים חיוביים ושליליים: ערכים חיוביים מגדילים את המרווח, וערכים שליליים מקרבים את האלמנטים זה לזה.

רישום מקוצר:

 1div.one-value {
 2    margin: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    margin: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    margin: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    margin: 10px 5px 15px 20px;
18}

תכונת margin מקבלת בין ערך אחד לארבעה ערכים.

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

תכונת `padding`

פונקציה:

תכונת padding קובעת את השטח הפנימי (הרווח) של אלמנט. היא משמשת ליצירת רווח בין התוכן לבין המסגרת של האלמנט. הערכים הבאים יכולים להיות מצוינים:.
ערכים קבועים: מגדירים את גודלו של ה-padding.(ex: 10px, 1em, 5%)
לא ניתן להשתמש בערכים שליליים. ניתן להגדיר ערכי padding רק כמספרים חיוביים.

רישום מקוצר:

 1div.one-value {
 2    padding: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    padding: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    padding: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    padding: 10px 5px 15px 20px;
18}

בדומה ל-margin, תוכלו להגדיר ערך אחד עד ארבעה ערכים.

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

תכונת `box-sizing`

 1/* Default content-box : 300px + 2 * 20px + 2 * 10px = 360px */
 2.content-box {
 3    width: 300px;
 4    padding: 20px;
 5    border: 10px solid blue;
 6    box-sizing: content-box;
 7    background-color: lightblue;
 8}
 9
10/* Using border-box */
11.border-box {
12    width: 300px;
13    padding: 20px;
14    border: 10px solid red;
15    box-sizing: border-box;
16    background-color: lightcoral;
17}

box-sizing היא תכונה ב-CSS אשר שולטת כיצד מחושבים הרוחב והגובה של אלמנט.

ב-class שנקרא content-box, רוחבו של האלמנט הוא 360px. הרוחב (width) הוא 300px, עם padding שמסתכם ב-40px (ימין ושמאל) ו-border שמסתכם ב-20px (ימין ושמאל), ובסך הכל 360px.
ב-border-box, רוחבו של האלמנט הוא 300px. padding ו-border כלולים ברוחב (width) המוגדר.

ערכי `box-sizing`

בעיקר קיימים שני ערכים ל-box-sizing: content-box ו-border-box, כאשר content-box הוא ברירת המחדל.

`content-box`

 1.content-box {
 2    box-sizing: content-box;
 3    width: 200px;
 4    padding: 20px;
 5    border: 10px solid black;
 6}
 7/*
 8260px = 200px(width) +
 920px(padding-left) + 20px(padding-right) +
1010px(border-left) + 10px(border-right)
11*/

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

בדוגמה זו, ה-width המוגדר הוא 200px, אך עם הוספת רוחב של padding ו-border משמאל ומימין, הרוחב הסופי של האלמנט הוא 260px.

`border-box`

1.border-box {
2    width: 200px;
3    padding: 20px;
4    border: 10px solid black;
5    box-sizing: border-box;
6}

כשמוגדר border-box, החישוב של width ו-height כולל את ה-padding וה-border. במילים אחרות, ה-width ו-height המוגדרים הופכים לגודל הכולל של התוכן, ה-padding וה-border.

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

סיכום ההבדלים של `box-sizing`

מאפיין	שיטת חישוב	חישוב רוחב אמיתי
`content-box` (ברירת מחדל)	`width` מתייחס רק לתוכן. `padding` ו-`border` מתווספים.	`width` + `padding` + `border`
`border-box`	`width` כולל הכל (תוכן, `padding`, `border`)	הרוחב המוגדר משמש כפי שהוא.

היתרונות של `box-sizing`

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

כיצד להחיל `border-box` באופן גלובלי

1*,
2*::before,
3*::after {
4    box-sizing: border-box;
5}

על ידי הגדרת CSS באופן זה, ניתן להחיל border-box על כל האלמנטים כדי למנוע שינויים בלתי צפויים בגודל.

סיכום

box-sizing קובע אם padding ו-border ייכללו ב-width וב-height של אלמנט.
שימוש ב-border-box הופך את חישובי הגודל לפשוטים יותר ומתאים לעיצוב רספונסיבי.

תכונת `visibility`

 1.visibility-visible {
 2    visibility: visible;
 3}
 4
 5.visibility-hidden {
 6    visibility: hidden;
 7}
 8
 9.visibility-collapse {
10    visibility: collapse;
11}

תכונת ה-visibility משמשת להראות או להסתיר אלמנטים, אך בניגוד לתכונת ה-display, היא משפיעה על הפריסה גם אם האלמנט מוסתר. היא רק מסתירה את האלמנט תוך שמירה על המיקום והגודל המקוריים שלו, מבלי להשפיע על פריסת אלמנטים אחרים.

תחביר בסיסי

1element {
2    visibility: value;
3}

value: ערך שמגדיר את הנראות של האלמנט.

סוגי ערכים

ניתן להגדיר את תכונת ה-visibility לערכים הבאים:.

`visible`

הגדרת visible תציג את האלמנט. זהו הערך המוגדר כברירת מחדל.

`hidden`

הגדרת hidden תסתיר את האלמנט אך תשמור את מקום הפריסה שלו.

`collapse`

collapse משמש בעיקר לשורות או עמודות בטבלאות. האלמנט הופך לבלתי נראה וגם המרחב שלו מתעלם ממנו. בעת יישום על שורות או עמודות בטבלה, השורות או העמודות הנסתרות מוסרות לחלוטין מהפריסה.
עם זאת, כאשר נעשה שימוש באלמנטים רגילים של בלוק או אינליין, למעט אלמנטים טבלאיים, הוא מתנהג כמו hidden והשטח בפריסה נשמר.

`inherit`

ציון inherit יירש את ערך תכונת visibility מהאלמנט ההורה.

הבדלים בין `visibility` ובין `display`

ישנם ההבדלים הבאים בין visibility ובין display.

visibility: hidden מסתיר את האלמנט אך משאיר את שטחו ואת הפריסה שלו.
display: none מסיר לחלוטין את האלמנט מהפריסה, ומאפשר לאלמנטים אחרים למלא את השטח הזה.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

מאפייני CSS לתצוגת קוד וציטוטים מאפייני CSS הקשורים לרקע

תכונות CSS הקשורות למודל תיבת ה-CSS

YouTube Video

HTML לתצוגה מקדימה

קשור למודל התיבה

תכונות width ו-height

ערכים שניתן להגדיר

הגדרת ערכים מינימליים ומקסימליים

תכונות margin ו-padding

תכונת margin

רישום מקוצר:

תכונת padding

פונקציה:

רישום מקוצר:

תכונת box-sizing

ערכי box-sizing

content-box

border-box

סיכום ההבדלים של box-sizing

היתרונות של box-sizing

כיצד להחיל border-box באופן גלובלי

סיכום

תכונת visibility

תחביר בסיסי

סוגי ערכים

visible

hidden

collapse

inherit

הבדלים בין visibility ובין display

YouTube Video

תכונות `width` ו-`height`

תכונות `margin` ו-`padding`

תכונת `margin`

תכונת `padding`

תכונת `box-sizing`

ערכי `box-sizing`

`content-box`

`border-box`

סיכום ההבדלים של `box-sizing`

היתרונות של `box-sizing`

כיצד להחיל `border-box` באופן גלובלי

תכונת `visibility`

`visible`

`hidden`

`collapse`

`inherit`

הבדלים בין `visibility` ובין `display`