Chiều cao và độ rộng trong CSS
Thiết lập chiều cao và độ rộng trong CSS
Các đặc tính height
và width
được dùng để thiết lập chiều cao và độ rộng của phần tử trong CSS. Chúng có thể nhận các giá trị sau:
- auto - là chế độ mặc định, trong đó trình duyệt tự tính toán chiều cao và độ rộng
- length - giá trị tính theo px, cm…
- percent (%) - giá trị tính theo phần trăm
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
Hình ảnh hiển thị trên trình duyệt của 2 ví dụ trên
Lưu ý: Đặc tính height
và width
không tính phần padding,
đường viền, lề. Chúng sẽ xác định chiều cao/độ rộng của khu vực bên trong phần padding,
đường viền, lề của phần tử.
Thiết lập max-width
Đặc tính max-width
dùng để chọn độ rộng tối đa cho phần tử, có thể dùng các giá trị:
- length - độ dài theo px, cm…
- percen (%) - phần trăm
- không - đây là chế độ mặc định, nghĩa là không có giới hạn tối đa
Vấn đề có thể xảy ra với thẻ <div>
bên trên là khi cửa sổ trình duyệt nhỏ hơn độ rộng phần tử (500px), trình duyệt sẽ thêm thanh cuộn dọc vào rtang. Nếu dùng max-width,
trình duyệt sẽ xử lý tốt hơn khi cửa sổ nhỏ.
Lưu ý: Giá trị của max-width
sẽ ghi đè width.
Ví dụ dưới đây cho thấy phần tử <div>
có chiều cao 100px và độ rộng tối đa là 500px.
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
Bài trước: Padding trong CSS
Bài sau: Mô hình hộp (Box Model) trong CSS
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Kí tự chữ nhỏ, ký tự số nhỏ FF
2 ngày -
Cách thức tỉnh trái ác quỷ Blox Fruit
Hôm qua -
Hình nền trắng, ảnh nền trắng đẹp
2 ngày -
Windows 11 sẽ kích hoạt mã hóa ổ đĩa BitLocker trên mọi PC
2 ngày -
Các công thức đạo hàm và đạo hàm lượng giác đầy đủ nhất
2 ngày -
Code Wuthering Waves mới nhất 17/05/2025 và hướng dẫn đổi code
2 ngày -
Outlook là gì? Cách sử dụng Outlook cho người mới
Hôm qua -
Ki tự khoảng trắng, ký tự khoảng trống, kí tự trống
2 ngày -
Tổng hợp 1001+ thuật ngữ trong Liên Quân Mobile
Hôm qua 7 -
Cách chuyển đổi (convert) nhiều tài liệu Word sang Google Docs
2 ngày