Box model ใน CSS เป็นแนวคิดที่ใช้ในการอธิบายวิธีการคำนวณขนาดของ element ในหน้าเว็บไซต์ โดยแบ่ง element ออกเป็นส่วนย่อย 4 ส่วน คือ:
Content: ส่วนที่เป็นเนื้อหาภายใน element
Padding: ส่วนของระยะห่างระหว่าง Content กับ Border
Border: เส้นขอบของ element
Margin: ระยะห่างระหว่าง Border ของ element กับ element อื่นๆ บนหน้าเว็บไซต์
โดย box model จะคำนวณขนาดของ element โดยใช้ขนาดของ content เป็นหลัก ซึ่งจะมีผลกับความกว้างและความสูงของ element โดยสูงและกว้างของ element จะเท่ากับขนาดของ content บวกกับ padding, border และ margin ตามลำดับ
box model ใน css
โดยการกำหนดขนาดของแต่ละส่วนนี้ใน CSS จะใช้ Property ต่างๆ ได้แก่:
content: width, height
padding: padding-top, padding-right, padding-bottom, padding-left
border: border-width, border-style, border-color
margin: margin-top, margin-right, margin-bottom, margin-left
และใน CSS ยังมี Property ที่ช่วยปรับขนาดของ element ให้เหมาะสมกับเนื้อหาภายใน ได้แก่ box-sizing ซึ่งจะช่วยคำนวณขนาดของ element โดยเอา padding และ border มาคำนวณเข้าไปด้วยใน content และกำหนดขนาดของ element ให้ถูกต้องตามที่ต้องการ
เราสามารถใช้ box model ในการกำหนดขนาดและระยะห่างของ element บนหน้าเว็บไซต์ได้ ตัวอย่างเช่น:
<div class="box">
<p>Hello World!</p>
</div>
.box {
width: 300px;
height: 200px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
ในตัวอย่างนี้ การกำหนด style ให้กับ element div ที่มี class ชื่อ box โดยมีขนาดความกว้าง 300px และความสูง 200px โดยมี padding ทั้งสี่ด้าน ขนาด 20px และมี border สีดำ ขนาด 1px และมี margin ทั้งสี่ด้าน ขนาด 10px จากนั้นจะมี element p ภายใน div ดังกล่าว โดยเนื้อหาที่อยู่ใน p คือ “Hello World!” ซึ่งจะอยู่ภายใน padding ของ div
ดังนั้น ขนาดจริงของ div จะเท่ากับ 300px (width) + 2 x 20px (padding) + 2 x 1px (border) + 2 x 10px (margin) = 362px (width) และ 200px (height) + 2 x 20px (padding) + 2 x 1px (border) + 2 x 10px (margin) = 262px (height)
โดยการใช้ box model ใน CSS จะช่วยให้เรากำหนดขนาดและระยะห่างของ element ให้เหมาะสมกับเนื้อหาภายใน และช่วยให้เว็บไซต์มีการจัดวางและการแสดงผลที่สวยงามและอ่านง่ายขึ้น
แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ
Follow Us / Thanat Sirikitphattana
นายช่างโยธา ศูนย์ก่อสร้างและบูรณะถนน 3 ส่วนก่อสร้างและบูรณะ 2 สำนักการโยธา