โมเดลกล่อง

เข้าใจว่าทุกองค์ประกอบคือกล่องที่ประกอบด้วยเนื้อหา แพดดิง เส้นขอบ และมาร์จิน และเชี่ยวชาญการใช้ box-sizing

10 นาที · 3 คำถาม

ใน CSS ทุกองค์ประกอบบนหน้าคือ กล่อง (box) สี่เหลี่ยม แม้ว่าคุณจะมองไม่เห็นมันก็ตาม กล่องนั้นมีสี่ชั้น เหมือนภาพวาดในกรอบที่แขวนอยู่บนผนัง ได้แก่ เนื้อหา (content) (ตัวภาพเอง) แพดดิง (padding) (ขอบขาวระหว่างภาพกับกรอบ) เส้นขอบ (border) (ตัวกรอบเอง) และ มาร์จิน (margin) (พื้นที่ว่างระหว่างกรอบกับภาพอื่น ๆ บนผนัง) นี่คือสิ่งที่เราเรียกว่า โมเดลกล่อง (box model)

มีสามคุณสมบัติที่ควบคุมชั้นเหล่านี้ padding กำหนดพื้นที่ ด้านใน ระหว่างเนื้อหากับเส้นขอบ border วาดเส้นขอบ คุณกำหนดความหนา รูปแบบ (solid สำหรับเส้นทึบ) และสีให้มัน margin กำหนดพื้นที่ ด้านนอก ซึ่งดันองค์ประกอบข้างเคียงออกไป ระยะทางทั้งหมดนี้แสดงเป็นพิกเซล (px)

.card {
  padding: 16px;
  border: 2px solid black;
  margin: 24px;
}

คุณสามารถปรับแต่ละด้านแยกกันได้ด้วย padding-top, padding-right, padding-bottom และ padding-left และ margin ก็เช่นเดียวกัน นอกจากนี้ยังมีรูปแบบย่อ (shorthand) เมื่อใช้สองค่า ค่าแรกจะมีผลกับด้านบนและด้านล่าง ค่าที่สองกับด้านซ้ายและด้านขวา ดังนั้น padding: 8px 16px; หมายถึง 8 พิกเซลด้านบนและด้านล่าง 16 พิกเซลด้านซ้ายและด้านขวา

.card {
  padding: 8px 16px;
  margin-top: 32px;
  margin-bottom: 8px;
}

หลุมพรางคลาสสิก โดยค่าเริ่มต้น เมื่อคุณเขียน width: 200px; (คุณสมบัติ width กำหนดความกว้าง) 200 พิกเซลนั้นครอบคลุมเฉพาะ เนื้อหา เท่านั้น แพดดิงและเส้นขอบจะถูกบวกเพิ่มเข้าไปอีก! กล่องที่มี width: 200px, padding: 16px และ border: 2px จริง ๆ แล้วกินความกว้าง 200 + 16 + 16 + 2 + 2 = 236 พิกเซล คุณสมบัติ box-sizing: border-box; แก้ปัญหานี้ ความกว้างที่ประกาศไว้จะรวมแพดดิงและเส้นขอบเข้าไปด้วย กล่องจะกว้าง 200 พิกเซลจริง ๆ และเป็นเนื้อหาที่หดตัวลงแทน

* {
  box-sizing: border-box;
}

.card {
  width: 200px;
  padding: 16px;
  border: 2px solid black;
}

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. คุณสมบัติใดกำหนดพื้นที่ระหว่างเนื้อหาของกล่องกับเส้นขอบของมัน?
   • margin
   • padding
   • border
   • width
2. หากไม่มี box-sizing: border-box กล่องที่มี width: 100px, padding: 10px และ border: 5px solid black จะกินความกว้างรวมทั้งหมดเท่าใด?
   • 100 พิกเซล
   • 115 พิกเซล
   • 130 พิกเซล
   • 110 พิกเซล
3. รูปแบบย่อ margin: 10px 20px; หมายความว่าอย่างไร?
   • 10 พิกเซลด้านซ้ายและด้านขวา 20 พิกเซลด้านบนและด้านล่าง
   • 10 พิกเซลด้านบนและด้านล่าง 20 พิกเซลด้านซ้ายและด้านขวา
   • 10 พิกเซลด้านบน 20 พิกเซลด้านล่าง