Sử dụng thuộc tính box-sizing để thay đổi không chỉ chiều rộng mà cả chiều cao của phần tử.
Dưới đây là mã cho độ rộng box với box-sizing dùng CSS3:
Ví dụ
<!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>
Kết quả
Mã trên cho kết quả sau:
