CSS Box Model: พื้นฐานการจัด Layout

CSS Box Model: พื้นฐานการจัด Layout

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการใช้งาน CSS ในรูปแบบต่างๆ ทั้ง Inline, Internal และ External CSS ซึ่งเป็นพื้นฐานสำคัญในการเริ่มต้นใช้งาน CSS ในบทนี้ เราจะมาทำความเข้าใจกับอีกหนึ่งแนวคิดหลักที่สำคัญมากๆ ใน CSS นั่นก็คือ CSS Box Model ซึ่งเป็นหัวใจของการจัด Layout และการควบคุมพื้นที่ของ Element ต่างๆ บนหน้าเว็บไซต์ของเรา

ลองจินตนาการว่าทุก Element บนหน้าเว็บ (เช่น <p>, <div>, <h1>) ถูกห่อหุ้มด้วยกล่องสี่เหลี่ยม CSS Box Model คือแบบจำลองที่อธิบายโครงสร้างของกล่องนี้ ซึ่งประกอบไปด้วยส่วนประกอบหลักๆ 4 ส่วนด้วยกัน:

• Content: เนื้อหาของ Element (เช่น ข้อความ รูปภาพ)
• Padding: พื้นที่ว่างระหว่าง Content และ Border
• Border: เส้นขอบของ Element
• Margin: พื้นที่ว่างรอบนอก Border

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

1. Content

Content คือส่วนที่แสดงเนื้อหาจริงๆ ของ Element ไม่ว่าจะเป็นข้อความ รูปภาพ หรือ Element อื่นๆ ที่อยู่ภายใน Content มีขนาดที่เปลี่ยนแปลงได้ตามเนื้อหาที่บรรจุอยู่ หรือเราสามารถกำหนดขนาดของ Content ได้โดยใช้ Properties width (ความกว้าง) และ height (ความสูง) ซึ่งเราจะเจาะลึกเรื่องนี้ในบทต่อไป

ตัวอย่าง:

<div style="width: 200px; height: 100px; background-color: lightblue;">
  This is the content.
</div>

ในตัวอย่างนี้ เรากำหนดความกว้างของ Content เป็น 200px และความสูงเป็น 100px และกำหนดสีพื้นหลังเป็นสีฟ้าอ่อน เพื่อให้เห็นขอบเขตของ Content ได้ชัดเจน

2. Padding

Padding คือพื้นที่ว่างภายใน Element ที่อยู่ระหว่าง Content และ Border Padding ช่วยให้เนื้อหาไม่ชิดกับขอบ Element มากเกินไป ทำให้ดูสบายตาและอ่านง่ายขึ้น เราสามารถกำหนด Padding ได้ทั้ง 4 ด้าน (บน, ล่าง, ซ้าย, ขวา) โดยใช้ Properties ดังนี้:

• padding-top: กำหนด Padding ด้านบน
• padding-right: กำหนด Padding ด้านขวา
• padding-bottom: กำหนด Padding ด้านล่าง
• padding-left: กำหนด Padding ด้านซ้าย

หรือเราสามารถใช้ Shorthand Property padding เพื่อกำหนด Padding ทั้ง 4 ด้านในบรรทัดเดียว โดยมีรูปแบบดังนี้:

padding: top right bottom left;

ถ้ากำหนดค่าเพียงค่าเดียว จะใช้กับ Padding ทั้ง 4 ด้าน:

padding: 10px; /* Padding 10px ทุกด้าน */

ถ้ากำหนด 2 ค่า ค่าแรกจะใช้กับ Padding ด้านบนและล่าง ส่วนค่าที่สองจะใช้กับ Padding ด้านซ้ายและขวา:

padding: 10px 20px; /* Padding ด้านบนและล่าง 10px, ด้านซ้ายและขวา 20px */

ตัวอย่าง:

<div style="width: 200px; height: 100px; background-color: lightblue; padding: 20px;">
  This is the content with padding.
</div>

ในตัวอย่างนี้ เรากำหนด Padding เป็น 20px ทุกด้าน ทำให้ Content ห่างจากขอบ Element 20px

3. Border

Border คือเส้นขอบของ Element ที่อยู่ระหว่าง Padding และ Margin Border สามารถใช้เพื่อเน้น Element หรือสร้างเส้นแบ่งระหว่าง Element ต่างๆ เราสามารถกำหนด Border ได้ทั้ง 4 ด้าน โดยใช้ Properties ดังนี้:

• border-top: กำหนด Border ด้านบน
• border-right: กำหนด Border ด้านขวา
• border-bottom: กำหนด Border ด้านล่าง
• border-left: กำหนด Border ด้านซ้าย

หรือเราสามารถใช้ Shorthand Property border เพื่อกำหนด Border ทั้ง 4 ด้านในบรรทัดเดียว โดยมีรูปแบบดังนี้:

border: width style color;

• width: ความหนาของเส้นขอบ (เช่น 1px, 5px, thick)
• style: รูปแบบของเส้นขอบ (เช่น solid, dashed, dotted)
• color: สีของเส้นขอบ (เช่น red, blue, #000000)

ตัวอย่าง:

<div style="width: 200px; height: 100px; background-color: lightblue; padding: 20px; border: 2px solid black;">
  This is the content with padding and border.
</div>

ในตัวอย่างนี้ เรากำหนด Border เป็นเส้นทึบสีดำ (solid black) มีความหนา 2px

4. Margin

Margin คือพื้นที่ว่างรอบนอก Element ที่อยู่ด้านนอก Border Margin ใช้เพื่อเว้นระยะห่างระหว่าง Element กับ Element อื่นๆ บนหน้าเว็บ เราสามารถกำหนด Margin ได้ทั้ง 4 ด้าน โดยใช้ Properties ดังนี้:

• margin-top: กำหนด Margin ด้านบน
• margin-right: กำหนด Margin ด้านขวา
• margin-bottom: กำหนด Margin ด้านล่าง
• margin-left: กำหนด Margin ด้านซ้าย

หรือเราสามารถใช้ Shorthand Property margin เพื่อกำหนด Margin ทั้ง 4 ด้านในบรรทัดเดียว โดยมีรูปแบบเดียวกับ padding:

margin: top right bottom left;

ตัวอย่าง:

<div style="width: 200px; height: 100px; background-color: lightblue; padding: 20px; border: 2px solid black; margin: 30px;">
  This is the content with padding, border, and margin.
</div>

ในตัวอย่างนี้ เรากำหนด Margin เป็น 30px ทุกด้าน ทำให้ Element ห่างจาก Element อื่นๆ รอบข้าง 30px

สรุป CSS Box Model

CSS Box Model เป็นพื้นฐานที่สำคัญมากในการจัด Layout ของเว็บไซต์ การเข้าใจส่วนประกอบต่างๆ ของ Box Model จะช่วยให้เราสามารถควบคุมพื้นที่ของ Element ต่างๆ ได้อย่างแม่นยำ และสร้าง Layout ที่สวยงามและตอบสนองความต้องการของเราได้

ลองพิจารณาภาพรวมของ Box Model อีกครั้ง:

1. เริ่มจาก Content ซึ่งเป็นเนื้อหาหลักของ Element
2. Padding เพิ่มพื้นที่ว่างภายใน Element ระหว่าง Content และ Border
3. Border สร้างเส้นขอบล้อมรอบ Element
4. Margin เพิ่มพื้นที่ว่างภายนอก Element เพื่อเว้นระยะห่างจาก Element อื่นๆ

ตัวอย่างการใช้งาน Box Model

ลองดูตัวอย่างการใช้งาน Box Model เพื่อสร้างกล่องข้อความที่สวยงาม:

<div style="width: 300px; background-color: #f2f2f2; padding: 20px; border: 1px solid #ccc; margin: 10px; text-align: center;">
  <h3>Welcome!</h3>
  <p>This is a simple text box created using CSS Box Model.</p>
</div>

ในตัวอย่างนี้ เราสร้าง <div> ที่มี:

• width: 300px; กำหนดความกว้างของ Content เป็น 300px
• background-color: #f2f2f2; กำหนดสีพื้นหลังเป็นสีเทาอ่อน
• padding: 20px; เพิ่ม Padding 20px ทุกด้าน
• border: 1px solid #ccc; สร้าง Border ขนาด 1px สีเทา
• margin: 10px; เพิ่ม Margin 10px ทุกด้าน
• text-align: center; จัดข้อความให้อยู่กึ่งกลาง

การปรับค่าต่างๆ ใน CSS Box Model จะส่งผลต่อขนาดและตำแหน่งของ Element บนหน้าเว็บ ดังนั้นการทดลองและทำความเข้าใจผลลัพธ์ของการเปลี่ยนแปลงแต่ละค่า จะช่วยให้คุณเชี่ยวชาญในการใช้งาน CSS Box Model มากยิ่งขึ้น

ในบทต่อไป เราจะมาเจาะลึกเรื่องการกำหนดขนาด (Width & Height) ของ Element ซึ่งเป็นส่วนสำคัญในการควบคุม Layout ของเว็บไซต์ อย่าลืมติดตามกันนะครับ!