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
-
Cách dùng Terabox lưu trữ với 1TB miễn phí
Hôm qua 5 -
4 cách kiểm tra lịch sử giao dịch BIDV trên điện thoại, máy tính
Hôm qua -
Cách chặn từ khóa và Hashtag trên Twitter
Hôm qua -
Các cách làm, tùy chỉnh trong bài sẽ giúp tăng tốc Windows 10 của bạn "nhanh như gió"
Hôm qua 6 -
PING là gì? Test PING như thế nào?
Hôm qua -
Hàm COUNTIFS, cách dùng hàm đếm ô theo nhiều điều kiện trong Excel
Hôm qua -
Sạc không dây là gì? Nó nhanh hơn hay chậm hơn sạc dây? Danh sách smartphone Android hỗ trợ sạc không dây
Hôm qua -
Điểm ưu tiên, điểm khuyến khích, khu vực ưu tiên khi xét tuyển năm 2022
Hôm qua -
Dynamic System Updates là gì?
Hôm qua -
Cách sao chép hoặc tạo bản sao toàn bộ trang tính trong Google Sheets
Hôm qua