Box Model

1. Core Idea

border คือเส้นขอบของกล่อง อยู่ระหว่าง padding กับ margin ใช้บอกขอบเขตของ element ให้ชัดขึ้น เช่น card, input, alert หรือกล่องตัวอย่างโค้ด เส้นขอบมีผลต่อขนาดที่มองเห็นของ element เพราะมันถูกนับเพิ่มรอบ content และ padding

• border ต้องมีความหนา style และสี จึงจะเห็นผลชัดเจน
• shorthand ยอดนิยมคือ border: 1px solid #94a3b8
• ถ้าไม่กำหนด border-style เส้นขอบมักไม่แสดง เพราะค่าเริ่มต้นคือ none
• กำหนดเฉพาะด้านได้ เช่น border-left เพื่อทำเส้น accent

2. Mental Model

ให้นึกถึงกรอบรูป: รูปภาพคือ content, ระยะว่างด้านในคือ padding, กรอบไม้รอบรูปคือ border และพื้นที่ว่างนอกกรอบคือ margin ถ้ากรอบหนาขึ้น ของทั้งหมดที่มองเห็นก็ใหญ่ขึ้นด้วย นี่คือเหตุผลที่ border เกี่ยวข้องกับการคำนวณขนาดของกล่อง

3. Rule / Definition

.card {
  border: 1px solid #94a3b8;
}

.notice {
  border-left: 4px solid #2563eb;
}

.outline {
  border-width: 2px;
  border-style: dashed;
  border-color: #64748b;
}

4. Worked Example

• เริ่มจากเลือก element ที่ต้องการให้มีขอบเขตชัด เช่น .card
• กำหนดความหนาก่อน เช่น 1px สำหรับเส้นบางหรือ 2px สำหรับเส้นชัดขึ้น
• เลือก style เช่น solid สำหรับเส้นปกติ dashed สำหรับเส้นประ
• เลือกสีที่เข้ากับ UI เช่นสีเทาอ่อนสำหรับกรอบทั่วไป หรือสี accent สำหรับสถานะสำคัญ
• ถ้าต้องเน้นแค่ด้านเดียว ให้ใช้ border-left, border-top, border-right หรือ border-bottom

5. Code Example

6. Recap

• border อยู่ระหว่าง padding กับ margin และเพิ่มขนาดที่มองเห็นของ element
• shorthand border มักเขียนเป็น width style color
• ต้องมี border-style เช่น solid, dashed หรือ dotted เส้นจึงแสดง
• ใช้ border เฉพาะด้านเมื่อต้องการเน้นบางส่วนโดยไม่ล้อมทั้งกล่อง

Lab 1: ใช้ border shorthand

เป้าหมาย: ฝึกเขียน border shorthand แบบ width style color ให้ card มีเส้นขอบที่เห็นชัด

Lab 2: แยก border-width style color

เป้าหมาย: ฝึกแยก border ออกเป็น border-width, border-style และ border-color เพื่อเห็นว่าทั้งสามส่วนทำงานร่วมกัน

Lab 3: ใช้ border เฉพาะด้าน

เป้าหมาย: ฝึกใช้ border-left เพื่อสร้างเส้น accent ให้กล่องแจ้งเตือนโดยไม่ต้องล้อมกรอบทั้งสี่ด้าน