องค์ประกอบแต่ละรายการในเอกสารถูกรองเป็นกล่องสี่เหลี่ยมผืนผ้าโดย CSS นี่คือโครงร่างการจัดวางเริ่มต้นและสามารถปรับแต่งได้ตามความต้องการ การจัดตำแหน่งขององค์ประกอบ เนื้อหาของพวกเขา และองค์ประกอบรอบข้างทำได้โดยการปฏิบัติตามโมเดลกล่องของ CSS
เพื่อเริ่มต้น เรามาดูโครงร่างของโมเดลกล่องตามภาพต่อไปนี้:
แหล่งที่มา: w3.org
เนื้อหา (Content)
รวมข้อมูลจริงในรูปแบบของข้อความ รูปภาพ หรือสื่ออื่นๆ คุณสมบัติ width และ height ปรับเปลี่ยนขนาดของกล่องนี้
ระยะภายใน (Padding)
พื้นที่ระหว่างขอบด้านนอกของเนื้อหาและขอบของมันหมายถึง padding กล่องนี้สามารถปรับขนาดได้โดยคุณสมบัติ padding คุณสมบัติเฉพาะขอบเช่น padding-left, padding-bottom ฯลฯ ช่วยให้ได้ระยะห่างที่กำหนดเอง
ขอบ (Border)
ระยะห่างระหว่างขอบด้านนอกของ padding และขอบด้านในของ margin กำหนดขอบขององค์ประกอบ โดยค่าเริ่มต้นความกว้างตั้งเป็น 0 คุณสมบัติ border ใช้สำหรับกำหนดขอบขององค์ประกอบ ขอบแต่ละด้านก็สามารถจัดรูปแบบได้เช่นกัน
ระยะนอก (Margin)
พื้นที่ระหว่างกล่องขององค์ประกอบและกล่องขององค์ประกอบรอบข้างถูกกำหนดเป็น margin นี่คล้ายกับระยะขอบหน้ากระดาษซึ่งถูกกำหนดเป็นพื้นที่ระหว่างขอบของหน้ากระดาษและเนื้อหาของมัน มันโปร่งใสในสี จำลองคุณสมบัติของ padding เว้นแต่ว่ามันล้างพื้นที่ภายนอกขอบขององค์ประกอบ เหมือนกับ padding ขอบแต่ละด้านสามารถกำหนดให้มี margin ที่กำหนดเองได้
ตัวอย่าง
พิจารณาตัวอย่างต่อไปนี้:
<!DOCTYPE html> <html> <head> <style> div { margin: 25px; padding: 35px; width: 200px; background-color: lightseagreen; border: 20px dashed indianred; } </style> </head> <body> <div> Content demo box<br/> </div> </body> </html>
ผลลัพธ์
ผลลัพธ์ที่ได้:
ที่นี่ เราได้กำหนดขนาดขององค์ประกอบ <div> ในข้อกำหนด CSS ความกว้างรวมขององค์ประกอบนี้คือ 360px ซึ่งคำนวณได้ดังนี้:
width + (left+right)padding + (left+right)border + (left+right)margin = 200 + (35+35) + (20+20) + (25+25) px = 360px
แม้จะดูเหมือนว่า margin และ padding เพียงเพิ่มพื้นที่ที่ไม่จำเป็นและรวมเข้ากับความกว้างรวมขององค์ประกอบ แต่ได้พบการประยุกต์ใช้ต่างๆ ในการทำให้เว็บเพจตอบสนอง (responsive) โมเดลกล่องช่วยจัดตำแหน่งองค์ประกอบได้ดีขึ้น
ตัวอย่างเพิ่มเติม
ตัวอย่างต่อไปนี้แสดงโมเดลกล่อง CSS:
<!DOCTYPE html> <html> <head> <style> div { margin: auto; padding: 35px; width: 80px; box-shadow: inset 0 0 22px indianred; border-radius: 50%; } div > div { padding: 0 0px 100px 0px; border-radius: 3%; box-shadow: inset 0 0 22px seagreen; } </style> </head> <body> <div> <div></div> </div> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
ตัวอย่างเพิ่มเติม
<!DOCTYPE html> <html> <head> <style> #demo { width: 350px; display: flex; float: left; border: 6px solid black; border-radius: 6%; } .d1 { margin-left: 20px; width: 150px; height: 80px; box-shadow: 0 0 0 4px mediumslateblue; box-sizing: border-box; border-radius: 36%; } .d2 { width: 150px; height: 80px; padding: 30px; box-shadow: 0 0 0 4px darkred; box-sizing: border-box; border-radius: 36%; } </style> </head> <body> <div id="demo"> <div class="d1"></div> <div class="d2"></div> </div> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
