ใช้ Box Model ใน CSS- โครงสร้างและการวางตำแหน่ง

ใน CSS Box Model เป็นแนวคิดสำคัญในการพิจารณาว่าองค์ประกอบมีโครงสร้างและตำแหน่งอย่างไรบนหน้าเว็บ ประกอบด้วยองค์ประกอบพื้นฐาน เช่น เนื้อหา Padding, Border และ Margin

 

Content

Content คือพื้นที่ที่มีเนื้อหาจริงขององค์ประกอบ เช่น ข้อความ รูปภาพ หรือวิดีโอ

ในการกำหนดขนาดของเนื้อหา เราใช้ คุณสมบัติ width  และ height

 

Padding

Padding border คือช่องว่างรอบ ๆ เนื้อหา ทำให้เกิดช่องว่างระหว่างเนื้อหาและองค์ประกอบ

ในการระบุ padding ค่า เราใช้  คุณสมบัติ padding-top, padding-right,padding-bottom และ padding-left

 

Border

The Border เป็นโครงร่างรอบองค์ประกอบ สร้างขอบเขตที่ชัดเจนระหว่างเนื้อหาและบริเวณโดยรอบ

ในการจัดรูปแบบ border เราใช้  คุณสมบัติ border-width, border-style, และ border-color

 

Margin

Margin คือช่องว่างภายนอกขององค์ประกอบ border ทำให้เกิดช่องว่างระหว่างองค์ประกอบอื่นๆ

ในการกำหนด margin ค่า เราใช้ คุณสมบัติ margin-top, margin-right, และ margin-bottom margin-left

 

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

ตัวอย่าง:

.box {  
  width: 200px;  
  height: 100px;  
  padding: 20px;
  border: 1px solid black;
  margin: 10px;  
}  

ในตัวอย่างข้างต้น องค์ประกอบที่มีคลาส .box มีความกว้าง 200px และความสูง 100px มี 20px padding สีดำ border ที่มีความหนา 1px และ margin 10px

 

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