Article · programming

HTML & CSS EP7: CSS Box Model และการจัดระยะองค์ประกอบเว็บไซต์

HTML & CSS

เรียนรู้ CSS Box Model อย่างเป็นระบบ ตั้งแต่ content, padding, border และ margin พร้อมตัวอย่างโค้ดที่นำไปทดลองได้จริง และหน้าเว็บ HTML แบบสมบูรณ์สำหรับฝึกจัดระยะองค์ประกอบ

1. CSS Box Model คืออะไร

เมื่อสร้างเว็บไซต์ด้วย HTML เราจะมีองค์ประกอบต่าง ๆ เช่น หัวข้อ ย่อหน้า รูปภาพ ปุ่ม และการ์ดข้อมูล CSS มีหน้าที่ควบคุมรูปลักษณ์และตำแหน่งขององค์ประกอบเหล่านี้ โดยแนวคิดสำคัญที่ช่วยให้จัดหน้าเว็บได้แม่นยำคือ **CSS Box Model** ซึ่งมององค์ประกอบ HTML แต่ละชิ้นเป็นกล่องที่มีพื้นที่หลายชั้น

Box Model ประกอบด้วย 4 ส่วนหลัก ได้แก่ **Content** คือพื้นที่เนื้อหา, **Padding** คือพื้นที่ว่างระหว่างเนื้อหากับเส้นขอบ, **Border** คือเส้นขอบของกล่อง และ **Margin** คือพื้นที่ว่างด้านนอกกล่องที่ใช้แยกระยะจากองค์ประกอบอื่น หากเข้าใจความสัมพันธ์ของทั้งสี่ส่วน จะช่วยแก้ปัญหากล่องใหญ่เกินไป ระยะห่างไม่สม่ำเสมอ และองค์ประกอบเบียดกันได้ง่ายขึ้น

หน้าจอแสดงการทำงานเกี่ยวกับการออกแบบเว็บไซต์และข้อมูลดิจิทัล — การวางโครงสร้างและออกแบบส่วนประกอบของเว็บไซต์

2. ทำความเข้าใจองค์ประกอบทั้งสี่

2.1 Content — พื้นที่เนื้อหา

Content คือพื้นที่ที่ใช้แสดงข้อความ รูปภาพ หรือเนื้อหาภายในองค์ประกอบ โดยคุณสมบัติ `width` และ `height` มักใช้กำหนดขนาดของพื้นที่นี้ในค่าเริ่มต้นของ CSS Box Model ตัวอย่างเช่น หากกำหนด `width: 300px` ความกว้างของพื้นที่เนื้อหาจะเท่ากับ 300 พิกเซล แต่ความกว้างทั้งหมดของกล่องอาจมากกว่านั้นเมื่อเพิ่ม padding และ border

2.2 Padding — ระยะห่างด้านใน

Padding เป็นพื้นที่ว่างระหว่างเนื้อหากับเส้นขอบ ช่วยให้ข้อความไม่ชิดขอบกล่องจนเกินไป เช่น การ์ดที่มีข้อความหลายบรรทัดควรมี padding เพื่อให้อ่านง่ายขึ้น ค่า padding ไม่ได้สร้างช่องว่างระหว่างกล่องกับองค์ประกอบด้านนอก แต่เพิ่มพื้นที่ภายในกล่อง

.card {
  padding: 24px;
}

.card-compact {
  padding: 12px;
}

.card-custom {
  padding: 12px 20px 16px 20px;
}

การกำหนด `padding: 24px` จะเพิ่มพื้นที่ด้านในทั้งสี่ด้านเท่ากัน ส่วน `padding: 12px 20px 16px 20px` ใช้ลำดับ บน ขวา ล่าง และซ้ายตามลำดับ หากต้องการกำหนดเพียงบางด้าน สามารถใช้ `padding-top`, `padding-right`, `padding-bottom` หรือ `padding-left` ได้

2.3 Border — เส้นขอบ

Border คือเส้นขอบที่ล้อมรอบเนื้อหาและ padding สามารถกำหนดความหนา รูปแบบ และสีได้ เช่น เส้นทึบ เส้นประ หรือเส้นจุด นอกจากนี้ `border-radius` ยังช่วยทำให้มุมกล่องโค้งมน เหมาะสำหรับการ์ด ปุ่ม ช่องกรอกข้อมูล และกล่องแจ้งเตือน

.card {
  border: 1px solid #cbd5e1;
  border-radius: 12px;
}

.card-highlight {
  border: 2px solid #2563eb;
}

.card-dashed {
  border: 2px dashed #94a3b8;
}

2.4 Margin — ระยะห่างด้านนอก

Margin ใช้กำหนดระยะห่างภายนอกกล่อง เพื่อแยกองค์ประกอบออกจากส่วนอื่น ตัวอย่างเช่น การกำหนด `margin-bottom: 20px` จะเพิ่มระยะด้านล่างของกล่อง ช่วยให้หัวข้อ ย่อหน้า และการ์ดไม่วางติดกันจนเกินไป

.section-title {
  margin-bottom: 16px;
}

.card {
  margin: 12px;
}

.container {
  margin: 0 auto;
}

รูปแบบ `margin: 0 auto` มักใช้จัดกล่องที่มีความกว้างกำหนดไว้ให้อยู่กึ่งกลางในแนวนอน เมื่อพื้นที่ด้านซ้ายและขวามีเพียงพอ ส่วน `margin: 12px` จะกำหนดระยะด้านนอกทั้งสี่ด้านเท่ากัน

💡 จำให้ง่ายPadding คือระยะด้านในกล่อง ส่วน Margin คือระยะด้านนอกกล่อง หากข้อความชิดขอบให้ตรวจสอบ padding แต่ถ้ากล่องอยู่ใกล้กล่องอื่นเกินไป ให้ตรวจสอบ margin หรือวิธีจัด layout ที่ใช้อยู่

3. คำนวณขนาดกล่องอย่างไร

เมื่อใช้ค่าเริ่มต้น `box-sizing: content-box` ความกว้างทั้งหมดของกล่องจะคำนวณจากความกว้าง content บวก padding ซ้ายและขวา และ border ซ้ายและขวา ส่วนความสูงทั้งหมดจะคำนวณในลักษณะเดียวกันจาก content, padding บนและล่าง และ border บนและล่าง โดย margin เป็นระยะภายนอกที่แยกต่างหาก

ส่วนประกอบ	ค่าตัวอย่าง	ผลต่อความกว้างกล่อง
Content width	300px	300px
Padding ซ้ายและขวา	20px + 20px	เพิ่ม 40px
Border ซ้ายและขวา	1px + 1px	เพิ่ม 2px
ความกว้างกล่องรวม	300 + 40 + 2	342px

จากตัวอย่าง กล่องที่กำหนด `width: 300px`, `padding: 20px` และ `border: 1px solid` จะมีความกว้างจริง 342 พิกเซลโดยไม่รวม margin หากวางกล่องนี้ในคอลัมน์ที่กว้างเพียง 320 พิกเซล อาจทำให้เกิดการล้นออกนอกพื้นที่ได้

3.1 ใช้ box-sizing: border-box

วิธีที่นิยมใช้เพื่อควบคุมขนาดให้ง่ายขึ้นคือ `box-sizing: border-box` ซึ่งทำให้ค่า `width` และ `height` รวม padding และ border เข้าไปแล้ว เมื่อกำหนดความกว้าง 300 พิกเซล กล่องจะมีความกว้างรวม 300 พิกเซล ไม่ใช่ 342 พิกเซลในตัวอย่างข้างต้น วิธีนี้ช่วยให้จัดคอลัมน์และการ์ดหลายใบได้ง่ายขึ้น

* {
  box-sizing: border-box;
}

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #cbd5e1;
}

แนวทางที่ควรใช้การกำหนด `box-sizing: border-box` ให้ทุกองค์ประกอบเป็นแนวทางที่นิยม เพราะช่วยให้คำนวณความกว้างและความสูงของกล่องได้ตรงกับค่าที่ระบุ โดยยังต้องคำนึงถึง margin และข้อจำกัดของ layout ด้วย

4. ตัวอย่าง Box Model ในหน้าเว็บไซต์จริง

ลองดูตัวอย่างหน้าเว็บขนาดเล็กที่มีส่วนหัว การ์ดข้อมูล และปุ่ม โดยใช้ padding เพื่อสร้างพื้นที่ภายใน ใช้ border เพื่อแยกขอบการ์ด และใช้ margin เพื่อเว้นระยะระหว่างองค์ประกอบ ตัวอย่างนี้เป็นเอกสาร HTML เต็มหน้า สามารถคัดลอกไปบันทึกเป็น `index.html` แล้วเปิดในเบราว์เซอร์ได้ทันที

ก่อนทดลองโค้ดตัวอย่างนี้เป็นหน้า HTML สำหรับเรียนรู้ CSS เท่านั้น ไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์หรือเรียกใช้บริการภายนอกเมื่อเปิดหน้าเว็บ

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Box Model Lab</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 32px 18px;
      font-family: Tahoma, Arial, sans-serif;
      color: #172033;
      background: #f1f5f9;
      line-height: 1.7;
    }

    .page {
      width: 100%;
      max-width: 960px;
      margin: 0 auto;
    }

    .hero {
      margin-bottom: 24px;
      padding: 28px;
      color: #ffffff;
      background: linear-gradient(135deg, #1d4ed8, #7c3aed);
      border-radius: 18px;
    }

    .hero h1 {
      margin: 0 0 8px;
      font-size: clamp(1.7rem, 4vw, 2.5rem);
      line-height: 1.25;
    }

    .hero p {
      margin: 0;
      color: #e0e7ff;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-bottom: 24px;
    }

    .card {
      min-width: 0;
      padding: 22px;
      background: #ffffff;
      border: 1px solid #dbe3ef;
      border-radius: 14px;
      box-shadow: 0 5px 16px rgba(15, 23, 42, 0.06);
    }

    .card h2 {
      margin: 0 0 10px;
      font-size: 1.15rem;
    }

    .card p {
      margin: 0 0 16px;
      color: #526078;
    }

    .tag {
      display: inline-block;
      padding: 5px 10px;
      color: #1d4ed8;
      background: #dbeafe;
      border-radius: 999px;
      font-size: 0.85rem;
      font-weight: 700;
    }

    .demo {
      margin-bottom: 24px;
      padding: 22px;
      background: #ffffff;
      border: 2px dashed #94a3b8;
      border-radius: 14px;
    }

    .demo h2 {
      margin: 0 0 12px;
    }

    .demo-box {
      margin: 12px 0;
      padding: 18px;
      background: #eff6ff;
      border: 2px solid #3b82f6;
      border-radius: 10px;
    }

    .button {
      display: inline-block;
      padding: 10px 18px;
      color: #ffffff;
      background: #2563eb;
      border: 2px solid #1d4ed8;
      border-radius: 9px;
      text-decoration: none;
      font-weight: 700;
    }

    .button:hover {
      background: #1e40af;
    }

    .note {
      padding: 16px 18px;
      background: #ecfdf5;
      border-left: 4px solid #10b981;
      border-radius: 8px;
    }

    @media (max-width: 720px) {
      .grid {
        grid-template-columns: 1fr;
      }

      body {
        padding: 20px 12px;
      }

      .hero,
      .card,
      .demo {
        padding: 20px;
      }
    }
  </style>
</head>
<body>
  <main class="page">
    <header class="hero">
      <h1>CSS Box Model Lab</h1>
      <p>เรียนรู้การจัดระยะด้วย Content, Padding, Border และ Margin</p>
    </header>

    <section class="grid" aria-label="องค์ประกอบของ Box Model">
      <article class="card">
        <h2>Padding</h2>
        <p>สร้างพื้นที่ว่างด้านใน ทำให้ข้อความไม่ชิดเส้นขอบจนเกินไป</p>
        <span class="tag">พื้นที่ด้านใน</span>
      </article>

      <article class="card">
        <h2>Border</h2>
        <p>กำหนดเส้นขอบเพื่อแยกพื้นที่ของการ์ดออกจากพื้นหลัง</p>
        <span class="tag">เส้นขอบ</span>
      </article>

      <article class="card">
        <h2>Margin</h2>
        <p>เว้นระยะด้านนอก เพื่อไม่ให้องค์ประกอบแต่ละชิ้นเบียดกัน</p>
        <span class="tag">พื้นที่ด้านนอก</span>
      </article>
    </section>

    <section class="demo">
      <h2>กล่องทดลอง</h2>
      <p>พื้นที่กรอบเส้นประคือกล่องตัวอย่าง ส่วนกล่องสีน้ำเงินมี margin ด้านนอก padding ด้านใน และ border ล้อมรอบ</p>
      <div class="demo-box">
        <strong>เนื้อหาอยู่ภายในกล่อง</strong>
        <p>Padding ช่วยเว้นระยะจากข้อความถึงขอบสีน้ำเงิน</p>
      </div>
      <a class="button" href="#summary">ดูสรุปแนวคิด</a>
    </section>

    <section class="note" id="summary">
      <strong>สรุป:</strong> ใช้ padding เพื่อจัดระยะด้านใน ใช้ border เพื่อกำหนดเส้นขอบ และใช้ margin เพื่อจัดระยะด้านนอก กล่องทั้งหมดใช้ box-sizing: border-box เพื่อควบคุมขนาดได้ง่ายขึ้น
    </section>
  </main>
</body>
</html>

5. เทคนิคจัดระยะให้หน้าเว็บดูเป็นมืออาชีพ

การจัดระยะที่ดีไม่ได้หมายถึงการเพิ่ม margin หรือ padding ให้มากที่สุด แต่คือการเลือกค่าที่สอดคล้องกันทั้งหน้าเว็บ เช่น ใช้ระยะ 8, 16, 24 และ 32 พิกเซลเป็นชุดพื้นฐาน แล้วเลือกใช้ตามระดับความสำคัญขององค์ประกอบ วิธีนี้ทำให้หน้าเว็บมีจังหวะที่สม่ำเสมอและดูเป็นระบบ

สำหรับการ์ดหลายใบ ควรใช้ `gap` ของ Flexbox หรือ CSS Grid เพื่อกำหนดระยะห่างระหว่างรายการอย่างชัดเจน แทนการใช้ margin กับทุกการ์ดโดยไม่วางแผน ส่วนการจัดกึ่งกลางกล่องในแนวนอนสามารถใช้ `margin-inline: auto` เมื่อกล่องมีความกว้างเหมาะสมและเป็นองค์ประกอบแบบ block

สถานการณ์	คุณสมบัติที่เหมาะสม	เหตุผล
ข้อความชิดขอบการ์ด	padding	เพิ่มพื้นที่ภายในกล่อง
ต้องการเส้นกรอบ	border	แยกขอบเขตองค์ประกอบให้เห็นชัด
หัวข้อกับเนื้อหาอยู่ใกล้กันเกินไป	margin-bottom	เพิ่มระยะระหว่างองค์ประกอบ
จัดระยะระหว่างการ์ดใน Grid	gap	ควบคุมช่องว่างระหว่างรายการได้เป็นระบบ
ต้องการให้กล่องมีขนาดตาม width ที่กำหนด	box-sizing: border-box	รวม padding และ border ไว้ในขนาดที่ระบุ

6. ข้อผิดพลาดที่พบบ่อย

ทำไมกล่องจึงกว้างเกินพื้นที่ที่กำหนด

ตรวจสอบค่า box-sizing ก่อน หากใช้ content-box ค่า padding และ border จะถูกบวกเพิ่มจาก width ที่กำหนด นอกจากนี้ควรตรวจสอบ min-width, ความกว้างของ parent และการกำหนดขนาดแบบตายตัวบนหน้าจอขนาดเล็กด้วย

Margin กับ Padding ต่างกันอย่างไร

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

ควรใช้ margin หรือ gap เมื่อมีรายการหลายใบ

หากรายการอยู่ภายใน Flexbox หรือ CSS Grid การใช้ gap มักควบคุมระยะระหว่างรายการได้สะดวกและสม่ำเสมอ ส่วน margin เหมาะกับระยะรอบองค์ประกอบแต่ละชิ้นหรือการจัดระยะเฉพาะจุด

ทำไม margin บางครั้งจึงไม่รวมกันตามที่คาด

ใน CSS ปกติ margin บนและล่างของ block บางกรณีอาจเกิด margin collapsing ทำให้ระยะที่มองเห็นไม่ใช่ผลบวกของ margin ทั้งสองค่าเสมอไป การใช้ Flexbox หรือ Grid จะช่วยหลีกเลี่ยงพฤติกรรมนี้ระหว่างรายการลูกได้ในหลายกรณี

7. แบบฝึกหัดทบทวน

ลองตอบคำถามต่อไปนี้ด้วยตนเองก่อนนำไปทดลองในเบราว์เซอร์: หากกล่องมี `width: 240px`, `padding-left: 15px`, `padding-right: 15px`, `border-left: 2px solid` และ `border-right: 2px solid` โดยใช้ `box-sizing: content-box` ความกว้างรวมของกล่องจะเป็นเท่าใดโดยไม่รวม margin?

เฉลยแบบฝึกหัดความกว้างรวมคือ 240 + 15 + 15 + 2 + 2 = **274 พิกเซล** โดยยังไม่รวม margin หากเปลี่ยนเป็น `box-sizing: border-box` และกำหนด width เท่าเดิม ความกว้างรวมของกล่องจะเป็น 240 พิกเซล

8. สรุปบทเรียน

CSS Box Model เป็นพื้นฐานสำคัญของการจัดวางเว็บไซต์ เพราะช่วยอธิบายว่าทำไมองค์ประกอบจึงมีขนาดและระยะห่างอย่างที่เห็น เมื่อแยกความเข้าใจเรื่อง content, padding, border และ margin ได้ชัดเจน การสร้างการ์ด ฟอร์ม เมนู และส่วนเนื้อหาที่เป็นระเบียบจะง่ายขึ้น

หน้าเว็บที่ดูเป็นระเบียบไม่ได้เกิดจากการตกแต่งมากที่สุด แต่เกิดจากการจัดพื้นที่ของแต่ละองค์ประกอบอย่างตั้งใจ

แนวทางฝึกต่อ: ทดลองเปลี่ยนค่า padding, margin, border และ gap ในไฟล์ตัวอย่างทีละค่า แล้วสังเกตผลบนหน้าจอทั้งขนาดคอมพิวเตอร์และโทรศัพท์ การเปลี่ยนทีละตัวแปรจะช่วยให้เข้าใจสาเหตุและผลลัพธ์ได้ชัดเจนกว่าการเปลี่ยนหลายค่าพร้อมกัน

Reach within 500px of the page end and stay for at least 5 minutes to earn EXP once per day.

⏳ Reading timer is running...