ทำความเข้าใจ CSS Box Model

แต่ละองค์ประกอบในเอกสาร HTML ถือเป็นกล่องสี่เหลี่ยมโดย CSS นี่คือโครงร่างเค้าโครงเริ่มต้นและสามารถปรับแต่งได้ตามความต้องการของเรา การวางตำแหน่งขององค์ประกอบ เนื้อหา และองค์ประกอบโดยรอบเป็นไปตามรูปแบบกล่องของ CSS

เริ่มกันที่ Layout ของ Box Model ตามรูปเลยครับ

ที่มา:w3.org

เนื้อหา

ซึ่งรวมถึงข้อมูลจริงในรูปแบบข้อความ รูปภาพ หรือเนื้อหาสื่ออื่นๆ คุณสมบัติความกว้างและความสูงปรับเปลี่ยนขนาดของช่องนี้

แพดดิ้ง

ช่องว่างระหว่างขอบด้านนอกของเนื้อหาและเส้นขอบหมายถึงช่องว่างภายใน กล่องนี้สามารถปรับขนาดได้ตามคุณสมบัติช่องว่างภายใน คุณสมบัติเฉพาะขอบ เช่น padding-left, padding-bottom ฯลฯ ช่วยในการกำหนดระยะห่างที่กำหนดเอง

ชายแดน

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

มาร์จิ้น

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

ตัวอย่าง

ลองพิจารณาตัวอย่างต่อไปนี้ −

กล่องสาธิตเนื้อหา

ผลลัพธ์

สิ่งนี้สร้างผลลัพธ์ต่อไปนี้ -

ที่นี่ เราได้กำหนดขนาดขององค์ประกอบ

ความกว้าง + (ซ้าย+ขวา)ช่องว่างภายใน + (ซ้าย+ขวา)เส้นขอบ + (ซ้าย+ขวา)ระยะขอบ =200 + (35+35) + (20+20) + (25+25) px=360px 

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

 ตัวอย่างต่อไปนี้แสดงให้เห็นถึงรูปแบบกล่อง CSS -
 


 
ผลลัพธ์
 

 สิ่งนี้ให้ผลลัพธ์ต่อไปนี้
 
 
 
ตัวอย่าง
 


 
ผลลัพธ์
 

 สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -