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
-
Game luyện chuột, game nhanh tay lẹ mắt trên máy tính
Hôm qua 3 -
Cách tính BHXH 1 lần, hưởng BHXH 1 lần mới nhất
Hôm qua -
Hàm trong Python là gì? Các hàm trong Python
Hôm qua 2 -
45 câu đố vui cho trẻ về nghề nghiệp
Hôm qua -
Cách thiết lập VPN trên iPhone hoặc iPad
Hôm qua 3 -
Hướng dẫn đóng dấu ngoặc số âm trong Excel
Hôm qua 1 -
Mảng trong Python
Hôm qua -
Đội hình Định Mệnh DTCL mùa 11, cách chơi, lên đồ
Hôm qua -
Code Roblox mới nhất tháng 10 và cách nhập Roblox Promo Code 2025
Hôm qua 6 -
Firmware là gì? Firmware khác Software như thế nào?
Hôm qua