ประกอบกล่องครบชั้น

.card {
  width: 240px;
  padding: 16px;
  border: 2px solid #94a3b8;
  margin: 12px;
  background: #f8fafc;
}

content 240 + padding ซ้ายขวา 32 + border ซ้ายขวา 4 = 276px จากขอบถึงขอบของกล่อง (ยังไม่รวม margin)

นี่คือเหตุผลที่คอลัมน์ 50% + padding แล้วล้นแถว — รอหัวข้อ box-sizing

ลองทำตามรายการด้านล่างในเบราว์เซอร์หรือไฟล์ของคุณ — ไม่มีตรวจอัตโนมัติในเฟสนี้

สร้าง .card ตามตัวอย่าง แล้วคำนวณความกว้างจากขอบถึงขอบด้วยตัวเองก่อนดู DevTools

content + padding ซ้ายขวา + border ซ้ายขวา

ปานกลาง