โมเดล Box

The CSS Podcast - 001: The Box Model

สมมติว่าคุณมี HTML ดังนี้

<p>I am a paragraph of text that has a few words in it.</p>

จากนั้นคุณเขียน CSS นี้สำหรับองค์ประกอบดังกล่าว

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

เนื้อหาจึงมีความกว้าง 142 พิกเซลแทนที่จะเป็น 100 พิกเซลตามที่คุณระบุ และ จะอยู่นอกองค์ประกอบ ทำไมจึงเป็นเช่นนั้น

Box Model เป็นรากฐานหลักของ CSS การทำความเข้าใจวิธีทำงานของรูปแบบกล่อง วิธีที่รูปแบบกล่องได้รับผลกระทบจากแง่มุมอื่นๆ ของ CSS และที่สำคัญคือ วิธีควบคุมรูปแบบกล่อง จะช่วยให้คุณเขียน CSS ที่คาดการณ์ได้มากขึ้น

การทำความเข้าใจรูปแบบกล่องของ CSS จะช่วยให้คุณทราบสาเหตุที่เนื้อหาไม่พอดีกับองค์ประกอบ

โปรดทราบว่าทุกอย่างที่แสดงโดย CSS คือกล่อง แม้ว่าจะเป็นเพียงข้อความหรือมี border-radius ที่ทำให้ดูเหมือนวงกลมก็ตาม

เนื้อหาและการปรับขนาด

กล่องมีลักษณะการทำงานที่แตกต่างกันตามdisplayค่า ขนาดที่ตั้งไว้ และเนื้อหาที่กล่องนั้นมี เนื้อหานี้อาจเป็นข้อความธรรมดาหรือกล่องเพิ่มเติมที่สร้างขึ้นโดยองค์ประกอบย่อย ไม่ว่าจะด้วยวิธีใดก็ตาม เนื้อหาจะส่งผลต่อขนาด ของกล่องโดยค่าเริ่มต้น

คุณควบคุมได้โดยใช้การกำหนดขนาดภายนอก หรือจะใช้การกำหนดขนาดภายใน เพื่อให้เบราว์เซอร์ตัดสินใจแทนคุณตามขนาดเนื้อหาก็ได้

นี่คือการสาธิตพื้นฐานที่อธิบายความแตกต่าง

เมื่อกล่องมีขนาดภายนอก คุณจะเพิ่มเนื้อหาได้ในจำนวนที่จำกัดก่อนที่เนื้อหาจะล้นออกจากกล่อง ซึ่งจะทำให้คำว่า "สุดยอด" ล้นออกมา

การสาธิตมีคำว่า "CSS is awesome" ในกล่องที่มีขนาดคงที่และ เส้นขอบหนา เนื่องจากกล่องมีความกว้างที่ระบุ จึงมีขนาดภายนอก ซึ่งหมายความว่าองค์ประกอบนี้จะควบคุมการปรับขนาดเนื้อหาขององค์ประกอบย่อย อย่างไรก็ตาม คำว่า "awesome" มีขนาดใหญ่เกินกว่ากล่อง จึงล้นออกมานอกกล่องเส้นขอบของกล่องหลัก (ดูข้อมูลเพิ่มเติมได้ในภายหลัง) วิธีหนึ่งในการป้องกันการล้นนี้คือการปล่อยให้กล่องมีขนาดโดยธรรมชาติด้วยการไม่ตั้งค่าความกว้าง หรือในกรณีนี้คือการตั้งค่า width เป็น min-content คีย์เวิร์ด min-content จะบอกให้กล่อง มีความกว้างเท่ากับความกว้างขั้นต่ำโดยธรรมชาติของเนื้อหา (คำว่า "สุดยอด") เท่านั้น ซึ่งจะช่วยให้กรอบพอดีกับข้อความ

ต่อไปนี้เป็นตัวอย่างที่ซับซ้อนมากขึ้นซึ่งแสดงให้เห็นผลกระทบของการปรับขนาดที่แตกต่างกันต่อเนื้อหาจริง

การกำหนดขนาดภายนอกช่วยให้คุณควบคุมขนาดของ องค์ประกอบได้ การกำหนดขนาดโดยเนื้อแท้จะป้องกันไม่ให้ข้อความล้น

เปิดและปิดการกำหนดขนาดโดยเนื้อแท้เพื่อดูว่าการกำหนดขนาดภายนอกช่วยให้คุณควบคุมได้มากขึ้น ด้วยการกำหนดขนาดภายนอก และการกำหนดขนาดโดยเนื้อแท้ช่วยให้เนื้อหาควบคุมได้มากขึ้น หากต้องการดูเอฟเฟกต์ ให้เพิ่มข้อความ 2-3 ประโยคลงในการ์ด เมื่อองค์ประกอบนี้มีการกำหนดขนาดภายนอก จะมีขีดจำกัดของจำนวนเนื้อหาที่คุณ เพิ่มได้ก่อนที่เนื้อหาจะล้น แต่จะไม่เกิดขึ้นเมื่อเปิดการกำหนดขนาดภายใน

โดยค่าเริ่มต้น องค์ประกอบนี้จะมีชุด width และ height ของ 400px อย่างละ 1 รายการ มิติข้อมูลเหล่านี้จะกำหนดขอบเขตที่แน่นอนให้กับทุกอย่างภายในองค์ประกอบ ซึ่งจะ มีผลเว้นแต่เนื้อหาจะใหญ่เกินกว่ากล่อง คุณดูการทำงานนี้ได้ โดยเปลี่ยนคำบรรยายใต้รูปภาพดอกไม้เป็นข้อความที่มีความสูงเกิน ความสูงของกล่อง

คำสำคัญ: การล้นเกิดขึ้นเมื่อเนื้อหามีขนาดใหญ่เกินกว่ากล่องที่เนื้อหานั้นอยู่ คุณ จัดการวิธีที่องค์ประกอบจัดการเนื้อหาที่ล้นได้โดยใช้พร็อพเพอร์ตี้ overflow

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

โปรดทราบว่าการกำหนดขนาดโดยเนื้อแท้เป็นลักษณะการทำงานเริ่มต้นของเบราว์เซอร์ และมักจะมีความยืดหยุ่นมากกว่าการกำหนดขนาดภายนอก

พื้นที่ของรูปแบบกล่อง

กล่องประกอบด้วยพื้นที่โมเดลกล่องที่แตกต่างกัน ซึ่งแต่ละพื้นที่มีหน้าที่เฉพาะ

แผนภาพแสดงพื้นที่หลัก 4 ส่วนของรูปแบบกล่อง ได้แก่ กล่องเนื้อหา กล่องระยะห่างจากขอบ กล่องเส้นขอบ และกล่องระยะขอบ
พื้นที่หลัก 4 ส่วนของรูปแบบกล่อง ได้แก่ กล่องเนื้อหา กล่องระยะห่าง กล่องเส้นขอบ และ กล่องขอบ

กล่องเนื้อหาคือพื้นที่ที่เนื้อหาอยู่ เนื้อหาสามารถ ควบคุมขนาดขององค์ประกอบหลักได้ ดังนั้นโดยปกติแล้วพื้นที่นี้จึงมีขนาดที่เปลี่ยนแปลงได้มากที่สุด

กล่องระยะห่างภายในจะล้อมรอบกล่องเนื้อหาและเป็นพื้นที่ที่สร้างขึ้นโดยพร็อพเพอร์ตี้ padding เนื่องจากระยะขอบภายในอยู่ภายในกล่อง พื้นหลังของกล่องจึงมองเห็นได้ในพื้นที่ ที่สร้างขึ้น หากช่องมีการตั้งค่ากฎการล้น เช่น overflow: auto หรือ overflow: scroll แถบเลื่อนจะใช้พื้นที่นี้ด้วย

แถบเลื่อนจะอยู่ในกล่องระยะห่างภายใน

กรอบเส้นขอบล้อมรอบกรอบระยะห่างภายใน และพื้นที่ของกรอบเส้นขอบจะกำหนดโดยค่า border ซึ่ง สร้างกรอบภาพสำหรับองค์ประกอบ ขอบเส้นขอบขององค์ประกอบคือ ขีดจำกัดของสิ่งที่คุณเห็น

ส่วนสุดท้ายคือกล่องขอบ ซึ่งเป็นพื้นที่รอบกล่องที่กำหนดโดยกฎ margin ของกล่อง พร็อพเพอร์ตี้ เช่น outline และ box-shadow จะใช้พื้นที่นี้ด้วยเนื่องจากมีการวาดไว้เหนือองค์ประกอบและไม่ ส่งผลต่อขนาดของกล่อง การเปลี่ยนoutline-widthของ200pxในกล่อง จะไม่เปลี่ยนแปลงสิ่งใดภายในขอบเส้น

เส้นขอบแบบกว้างจะไม่ส่งผลต่อขนาดของ องค์ประกอบที่เหลือ

การเปรียบเทียบที่มีประโยชน์

โมเดลกล่องนั้นซับซ้อนและเข้าใจยาก ดังนั้นเราจึงมีคำอุปมาสำหรับสิ่งที่คุณได้เรียนรู้มาจนถึงตอนนี้

กรอบรูป 3 อัน
โมเดลกล่องที่แสดงโดยใช้กรอบรูปภาพจริง

ในแผนภาพนี้ คุณมีกรอบรูป 3 กรอบติดอยู่ข้างกันบน ผนัง องค์ประกอบของรูปภาพที่ใส่กรอบจะสอดคล้องกับรูปแบบกล่องดังนี้

  • กล่องเนื้อหาคืออาร์ตเวิร์ก
  • กล่องรองรับคือแผ่นรองสีขาวที่อยู่ระหว่างกรอบและอาร์ตเวิร์ก
  • กรอบขอบเขตคือเฟรมที่ให้ขอบเขตที่แท้จริงสำหรับอาร์ตเวิร์ก
  • กล่องขอบคือพื้นที่ระหว่างเฟรม
  • เงาจะอยู่ในพื้นที่เดียวกับกล่องขอบ

แก้ไขข้อบกพร่องของรูปแบบกล่อง

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์จะแสดงภาพการคำนวณโมเดลกล่องของกล่องที่เลือก ซึ่งจะช่วยให้คุณเข้าใจวิธีการทำงานของโมเดลกล่องและวิธีที่โมเดลกล่อง ส่งผลต่อเว็บไซต์ที่คุณกำลังทำงานอยู่

วิธีลองใช้ฟีเจอร์นี้ใน Chrome

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  2. เลือกองค์ประกอบ
  3. แสดงโปรแกรมแก้ไขข้อบกพร่องของรูปแบบกล่อง
โปรแกรมแก้ไขข้อบกพร่องของโมเดลกรอบสำหรับ การสาธิตเส้นขอบ

ควบคุมรูปแบบกล่อง

หากต้องการทำความเข้าใจวิธีควบคุมรูปแบบกล่อง คุณต้องทำความเข้าใจก่อนว่าเกิดอะไรขึ้นในเบราว์เซอร์

เบราว์เซอร์ทุกตัวจะใช้สไตล์ชีต User Agent กับเอกสาร HTML สไตล์ ชีตจะกำหนดลักษณะและการทำงานขององค์ประกอบ หากองค์ประกอบไม่ได้ กำหนด CSS ไว้ CSS ในสไตล์ชีตของ User Agent จะแตกต่างกันไปตามเบราว์เซอร์ แต่ ทุกเบราว์เซอร์จะมีค่าเริ่มต้นที่ช่วยให้อ่านเนื้อหาได้ง่ายขึ้น

ชีตสไตล์ของ User Agent จะกำหนดค่าเริ่มต้นสำหรับองค์ประกอบที่ใช้ display เช่น ค่าเริ่มต้นของ display ในองค์ประกอบ <div> คือ block, <li> มีค่าเริ่มต้นของ display เป็น list-item และ <span> มีค่าเริ่มต้นของ display เป็น inline

องค์ประกอบ inline มีระยะขอบระดับบล็อก แต่องค์ประกอบอื่นๆ ไม่สนใจ เมื่อใช้ inline-block องค์ประกอบอื่นๆ จะใช้ขอบที่บล็อก แต่องค์ประกอบแรกจะยังคงมีลักษณะการทำงานส่วนใหญ่เหมือนกับที่เคยมีในฐานะองค์ประกอบ inline โดยค่าเริ่มต้น block จะเติมพื้นที่ในบรรทัดที่ใช้ได้ ในขณะที่องค์ประกอบ inline และ inline-block จะมีขนาดเท่ากับเนื้อหาขององค์ประกอบนั้นๆ เท่านั้น

นอกจากนี้ ชีตสไตล์ชีตของ User Agent ยังตั้งค่าเริ่มต้นสำหรับ box-sizing ซึ่งจะบอกกล่องวิธีคำนวณขนาด โดยค่าเริ่มต้น องค์ประกอบทั้งหมดจะตั้งค่าเป็น box-sizing: content-box; ซึ่งหมายความว่าเมื่อคุณตั้งค่ามิติข้อมูล เช่น width และ height มิติข้อมูลเหล่านั้นจะมีผลกับกล่องเนื้อหา หากคุณ ตั้งค่า padding และ border ค่าเหล่านี้จะเพิ่มลงในขนาดของกล่องเนื้อหา

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับพร็อพเพอร์ตี้ที่ส่งผลต่อขนาดของ Box Model

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

คุณคิดว่า .my-box จะกว้างเท่าใด

200px
เนื่องจากค่าเริ่มต้นของ box-sizing คือ content-box ระบบจึงเพิ่มระยะขอบภายในและ เส้นขอบลงในความกว้าง 200px จะถูกต้องหากช่องมี box-sizing: border-box
260px
การกำหนดขนาดกล่องเริ่มต้นคือ content-box ซึ่งหมายความว่าระบบจะเพิ่มระยะขอบภายในและ เส้นขอบลงในกล่องโดยรวม

ความกว้างจริงของกล่องนี้คือ 260 พิกเซล เนื่องจาก CSS ใช้ box-sizing: content-box เริ่มต้น ความกว้างที่ใช้จึงเป็นความกว้างของเนื้อหา และจะมีการเพิ่ม padding และ border ทั้ง 2 ด้านลงในความกว้างนั้น 200 พิกเซลสำหรับเนื้อหา + 40 พิกเซลสำหรับการเว้นวรรค + 20 พิกเซลสำหรับเส้นขอบทำให้ความกว้างที่มองเห็นได้รวมเป็น 260 พิกเซล

คุณเปลี่ยนค่านี้ได้โดยระบุborder-boxการปรับขนาดดังนี้

.my-box {
  box-sizing: border-box;
    width: 200px;
    border: 10px solid;
    padding: 20px;
}

โมเดลกล่องทางเลือกนี้จะบอกให้ CSS ใช้ width กับกล่องเส้นขอบ แทนกล่องเนื้อหา ซึ่งหมายความว่า border และ padding ของเราจะถูกดันเข้าไป ดังนั้นเมื่อคุณตั้งค่า .my-box ให้มีความกว้าง 200px ระบบจะแสดงผลที่ความกว้าง 200px จริงๆ

ดูวิธีการทำงานได้ในการสาธิตแบบอินเทอร์แอกทีฟต่อไปนี้ เมื่อสลับค่า box-sizing พื้นที่สีน้ำเงินจะแสดง CSS ที่ใช้ภายใน ช่อง

เปรียบเทียบผลลัพธ์ของการกำหนดขนาด content-box และ border-box
*,
*::before,
*::after {
  box-sizing: border-box;
}

กฎ CSS นี้จะเลือกทุกองค์ประกอบในเอกสารและทุกองค์ประกอบสมมติ ::before และ ::after แล้วใช้ box-sizing: border-box ซึ่งหมายความว่าตอนนี้ทุกองค์ประกอบจะใช้รูปแบบกล่องทางเลือกนี้

เนื่องจากโมเดลกล่องทางเลือกคาดการณ์ได้มากกว่า นักพัฒนาซอฟต์แวร์จึงมักเพิ่มกฎนี้ลงในการรีเซ็ตและตัวปรับมาตรฐาน เช่นกฎนี้

แหล่งข้อมูล

สไตล์ชีต User Agent