การตั้งค่าและคำนวณ Box Model และการใช้ box-sizing กับขนาดของ Element ใน CSS

ใน CSS จะมีเรื่อง Box Model ซึ่งจะเกี่ยวข้องกับเรื่องการกำหนดขนาดของ Element
ลองมาดูตัวอย่างโค้ดนี้กัน

.box {
  border-width: 1px;
  margin: 20px auto;
  width: 500px;
}

.box-extend {
  border-width: 10px;
  margin: 20px auto;
  padding: 50px;
  width: 500px;
}

ลองมาดูกันที่ .box-extend
ผลที่ได้จะออกมาเป็นดังภาพนี้ครับ

without-box-sizing

จากขนาดความกว้างที่ตั้งไว้, width: 500px และ padding: 50px ซึ่งค่า padding นี่จะถูกบวกเพิ่มไปทั้ง บน-ขวา-ล่าง-ซ้าย ด้านละ 50px ทำให้ผลรวมความกว้างของ element หรือ class นี้เท่ากับ 600px และจาก border-width: 10px ก็คิดแปปเดียวกันกับ padding คือบวกเพิ่มเข้าไปในชั้นนอกสุดของ element บน-ขวา-ล่าง-ซ้าย อีกด้านละ 10px รวมแล้วมีความกว้างทั้งหมด 620px
เช่นเดียวกันกับ .box ซึ่งก็จะมี border มาเพิ่มให้ขวาซ้ายฝั่งละ 1px

ลองใช้ Inspector และดู Box Model ของ .box-extend กันครับ จะเห็นโครงสร้างของ Box Model เป็นแบบนี้

box-model-without-box-sizing

ซึ่งหากเราจะเขียน CSS ให้มีขนาดที่เป๊ะ โดยที่มี border มี padding ด้วยแล้ว เราต้องคำนวณโดยการไปหักลบจากค่า width ที่ต้องการนะครับ ซึ่งไม่ได้ยากอะไรมากนัก เพียงแค่คิดค่า width ที่ต้องการไว้ว่าเท่าไหร่ และไปลบกับค่า padding และ border ที่จะเพิ่มเข้ามาในด้าน ขวา และ ซ้าย และกำหนดค่า width ที่ลบไปแล้วเขียนใน CSS

แต่ถ้าหากไม่ต้องการการคำนวณแบบที่กล่าวไป มีวิธีที่ง่ายกว่านั้นคือการใช้ box-sizing: border-box; เข้าไปกับทั้ง 2 classes นั้น

.box,
.box-extend {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.box {
  border-width: 1px;
  margin: 20px auto;
  width: 500px;
}

.box-extend {
  border-width: 10px;
  margin: 20px auto;
  padding: 50px;
  width: 500px;
}

ผลที่ได้คือ

with-box-sizing

ขนาดของ element นั้นจะถูกกำหนดตามค่า width เลยโดยไม่นำ padding และ border มาคิดภายนอก width: 500px นั้น แต่จะอยู่ภายในแทน ซึ่งตัวหนังสือก็จะเริ่มที่ 1px จากขอบซ้าย ของ .box และ 60px จากขอบซ้ายของ .box-extend

Box Model ของ .box-extend ก็จะเป็นแบบนี้ครับ

box-model-with-box-sizing

สำหรับใครที่ชอบวิธีการแบบใช้ box-sizing: border-box; กับทุก element เลยก็สามารถเขียนแบบนี้ไปได้เลย

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

แต่ต้องใส่ Prefix อย่าง -webkit- และ -moz- ไปด้วยนะครับ เพราะ box-sizing นี้ค่อนข้างใหม่ และให้ระวังไว้ด้วยว่าตัวนี้สำหรับ IE สามารถใช้ได้กับ IE8 ขึ้นไปเท่านั้นครับ

About these ads

2 thoughts on “การตั้งค่าและคำนวณ Box Model และการใช้ box-sizing กับขนาดของ Element ใน CSS

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s