width, height và thuộc tính kích thước – kiểm soát chiều ngang, chiều cao, tự động co giãn.
1. Tại sao cần đặt kích thước?
Trong HTML, các phần tử có thể:
- Tự động co giãn theo nội dung
- Hoặc bạn muốn cố định kích thước để kiểm soát bố cục chính xác hơn
CSS cung cấp các thuộc tính để làm điều đó:
width: chiều rộngheight: chiều cao
2. Cách sử dụng
.box {
width: 300px;
height: 200px;
}
Bạn có thể dùng nhiều đơn vị đo:
| Đơn vị | Ý nghĩa |
|---|---|
px | Pixel, đơn vị cố định |
% | Tỷ lệ phần trăm so với phần tử cha |
em | Dựa theo font-size của phần tử cha |
vw, vh | Viewport Width / Height (theo kích thước màn hình) |
3. Kết hợp với box-sizing
Nếu dùng padding và border thì nên khai báo:
* {
box-sizing: border-box;
}
→ Giúp kích thước width và height bao gồm luôn cả padding và border.
4. Tự động co giãn theo nội dung
Mặc định, phần tử sẽ co giãn theo nội dung nếu bạn không đặt kích thước:
.auto-box {
background: #e0f7fa;
}
<div class="auto-box">Đây là nội dung ngắn</div>
<div class="auto-box">Nội dung dài hơn sẽ khiến phần tử dài ra</div>
→ Đây là hành vi mặc định của display: block.
5. Giới hạn kích thước
Bạn có thể đặt giới hạn bằng:
max-width: 100%;
min-height: 150px;
max-widthgiúp phần tử không vượt quá một mức nào đómin-heightgiữ cho phần tử không thấp hơn mức tối thiểu
Ví dụ rất hữu ích cho ảnh hoặc card:
img {
max-width: 100%;
height: auto;
}
→ Giúp ảnh không bị vỡ khi hiển thị trên thiết bị nhỏ.
6. Thực hành
style.css
.box {
width: 300px;
height: 150px;
background-color: #f3e5f5;
border: 2px solid #7b1fa2;
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px;
}
.box-auto {
background-color: #fff3e0;
padding: 10px;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 7 – Width và Height</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
Hộp có kích thước cố định 300x150px (đã bao gồm padding & border).
</div>
<div class="box-auto">
Hộp này sẽ tự co giãn theo độ dài của nội dung bên trong. Không khai báo width hoặc height.
</div>
</body>
</html>
7. Ghi nhớ
| Thuộc tính | Tác dụng |
|---|---|
width, height | Đặt kích thước phần tử |
max-width | Giới hạn chiều rộng tối đa |
min-height | Giới hạn chiều cao tối thiểu |
box-sizing | Kiểm soát cách tính kích thước |
Thảo luận