Max-width, độ rộng tối đa của phần tử trong CSS
Đặc tính width và max: width xác định độ rộng của phần tử.
Như đã được đề cập trước đó, phần tử khối luôn chiếm hết chiều rộng có thể (kéo từ bên trái sang bên phải). Việc thiết lập độ rộng bằng đặc tính width cho phần tử khối sẽ ngăn nó kéo dài tới tận viền ngoài cùng. Sau đó có thể đặt lề tự động, căn giữa cho phần tử theo chiều ngang. Phần tử sẽ chỉ chiếm phần độ rộng đã định sẵn, phần còn lại sẽ được chia đều cho 2 lề.
Lưu ý: Khi độ rộng cửa sổ nhỏ hơn của phần tử, trình duyệt sẽ thêm thanh cuộn ngang cho trang. Trong trường hợp này nên dùng max-width. Việc này vừa giúp trình duyệt dễ xử lý hơn khi cửa sổ quá nhỏ, cũng rất quan trọng trên các thiết bị màn hình nhỏ.
Đây là ví dụ về cách dùng 2 đặc tính width và max-width nói trên.
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
Thay đổi độ rộng cửa sổ trình duyệt để thấy sự khác biệt
Bài trước: Hiển thị phần tử trong CSS
Bài sau: Vị trí của phần tử trong CSS
Bạn nên đọc


Cũ vẫn chất
-
Giờ đẹp, hướng đẹp xuất hành mùng 1, 2, 4 Tết 2024
Hôm qua -
Hướng dẫn tạo hiệu ứng động trong Canva
2 ngày -
Bảng đơn vị đo khối lượng, cách đổi đơn vị đo khối lượng
Hôm qua -
Ngày Hoàng đạo tháng 2 năm 2024, ngày đẹp tháng 2/2024
2 ngày -
Công thức tính diện tích tam giác: vuông, thường, cân, đều
Hôm qua 19 -
Ngày đẹp khai xuân 2024, ngày tốt khai trương đầu năm 2024
2 ngày -
Top 7 phần mềm giả lập PC trên Android
2 ngày -
Hóa vàng ngày nào đẹp Tết Giáp Thìn 2024
2 ngày -
11 ứng dụng bạn nên xóa ngay để tránh bị theo dõi
Hôm qua -
Mẹo chơi trái Băng trong Blox Fruit
Hôm qua