ใช้คุณสมบัติ box-sizing เพื่อเปลี่ยนไม่แค่ความกว้าง แต่ความสูงขององค์ประกอบด้วย
นี่คือโค้ดสำหรับ Box Width กับ Box-Sizing โดยใช้ CSS3 −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { width: 200px; height: 200px; display: inline-block; } .contentBox { padding: 50px; border: 1px solid rgb(255, 0, 128); } .borderBox { box-sizing: border-box; padding: 50px; border: 1px solid rgb(194, 0, 194); } </style> </head> <body> <h1>Box sizing example using CSS</h1> <div class="contentBox"> This div doesn't have box sizing property that's why it looks bigger </div> <div class="borderBox"> This div has box sizing property </div> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
