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 ถัดไป
CSS box model

ความแตกต่างระหว่าง 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/

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.