CSS Box Model

CSS box model เป็น box ที่คลุมทุกๆ element ของ HTML ไว้ การจะสร้าง Layout ที่ดี ให้กับเว็บไซต์ เราจำเป็นต้องเข้าใจถึง CSS box model

CSS box model ประกอบด้วยส่วนต่างๆ ดังนี้

1. content area : ส่วนที่แสดง text หรือ รูปภาพ
2. padding : เป็นช่องว่างที่อยู่ภายใน border ซึ่งคั่นระหว่าง border กับ content ถัดไป
3. border :  อยู่รอบ content area และ padding ถ้าสามารถเห็น border ได้ เราจะเห็นการแยกชัดเจนระหว่าง padding กับ margin
4. margin : เป็นช่องว่างที่อยู่ภายนอก border ซึ่งคั่นระหว่าง border กับ element ถัดไป

ความแตกต่างระหว่าง content-box กับ border-box

จากภาพตัวอย่างข้างบน จะเห็นว่าเรากำหนดค่า width: 300px; ไว้

การกำหนด width ของ content-box  จะหมายถึงความกว้างของ content area อย่างเดียว ส่วน border-box จะหมายถึงความกว้างภายใน border (content area + padding + border)

content-box
width = content-area
300 = 300

border-box
width = content area + padding + border
300 = 260 + (15×2) + (5×2)
300 = 260 + (padding ซ้ายและขวา) + (border ซ้ายและขวา)

//codepen.io/nemopear/embed/KrdodP/?height=265&theme-id=0&default-tab=html,result

Image credit : 

1. https://stackoverflow.com/questions/44453391/what-is-the-difference-between-border-box-and-content-box-in-css
2. http://ictacademy.com.ng/css-box-model/