Sử dụng thuộc tính kích thước hộp để thay đổi không chỉ chiều rộng của phần tử mà còn thay đổi chiều cao.
Sau đây là mã cho chiều rộng hộp với kích thước hộp sử 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> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
