คุณสมบัติของ CSS ที่เกี่ยวข้องกับ Box Model

Articles

บทความนี้อธิบายคุณสมบัติของ CSS ที่เกี่ยวข้องกับ Box Model

คุณสามารถเรียนรู้เกี่ยวกับกรณีการใช้งานและรูปแบบคำสั่งสำหรับคุณสมบัติเช่น width, height และ margin

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>

ที่เกี่ยวข้องกับ Box Model

คุณสมบัติ `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 ที่ใช้ควบคุมระยะห่างภายนอกและภายในขององค์ประกอบภายในโมเดลกล่อง (box model) ใช้ปรับระยะห่างระหว่างองค์ประกอบและจัดการลักษณะที่ปรากฏให้เรียบร้อย

ในคลาส margin-padding จะกำหนดทั้ง margin และ padding มีพื้นที่ margin อยู่ภายนอกขอบแน่นหนา (solid border) และพื้นที่ padding อยู่ภายในขอบแน่นหนา
ในคลาส margin-only จะกำหนดเฉพาะ margin เท่านั้น คุณจะเห็นว่าพื้นที่สีน้ำเงินมีขนาดเล็กกว่าเมื่อเปรียบเทียบกับคลาส margin-padding เพราะไม่มีพื้นที่ padding ภายในขอบแน่นหนา
ในคลาส no-margin ได้กำหนดค่า margin และ padding เป็น 0 ทั้งคู่ คุณจะเห็นว่าพื้นที่สีน้ำเงินถูกดันไปชิดซ้ายทั้งหมด เพราะไม่มีพื้นที่ margin ภายนอกขอบแน่นหนา

วิธีนี้ คุณสมบัติ margin ใช้กำหนดพื้นที่ภายนอกขององค์ประกอบ และปรับระยะห่างระหว่างองค์ประกอบ ในทางกลับกัน คุณสมบัติ padding ใช้กำหนดพื้นที่ภายในขององค์ประกอบ และปรับระยะห่างระหว่างเนื้อหาและขอบ

คุณสมบัติ `margin`

คุณสมบัติ margin ใช้กำหนดพื้นที่ภายนอก (margin) ขององค์ประกอบ ใช้สร้างพื้นที่ระหว่างองค์ประกอบที่อยู่ติดกัน สามารถกำหนดค่าได้ดังต่อไปนี้:
ค่าคงที่: สามารถกำหนดขนาดของ margin เป็นพิกเซล (pixels), หน่วยสัมพันธ์ (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) ขององค์ประกอบ ใช้เพื่อสร้างพื้นที่ระหว่างเนื้อหาและขอบขององค์ประกอบ สามารถกำหนดค่าได้ดังต่อไปนี้:
ค่าคงที่: ระบุขนาดของ 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 ที่ควบคุมวิธีการคำนวณความกว้างและความสูงขององค์ประกอบ

ในคลาส 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 padding และ border ถูกปรับภายในขอบเขตนั้น

สรุปความแตกต่างของ `box-sizing`

คุณสมบัติ	วิธีการคำนวณ	การคำนวณความกว้างที่แท้จริง
`content-box` (ค่าเริ่มต้น)	`width` หมายถึงเฉพาะเนื้อหา เพิ่ม `padding` และ `border`	`width` + `padding` + `border`
`border-box`	`width` คือทุกสิ่ง (รวมถึงเนื้อหา, `padding`, `border`)	ใช้ `width` ที่กำหนดไว้ตามนั้น

ข้อดีของ `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 ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

คุณสมบัติ CSS สำหรับการแสดงโค้ดและคำอ้างอิง คุณสมบัติ CSS ที่เกี่ยวข้องกับพื้นหลัง

คุณสมบัติของ CSS ที่เกี่ยวข้องกับ Box Model

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

ที่เกี่ยวข้องกับ Box Model

คุณสมบัติ 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`