1. Chiều rộng và chiều cao trong CSS
Thuộc tính height và width được sử dụng để thiết lập chiều cao và chiều rộng của một phần tử
Các thuộc tính chiều cao và chiều rộng không bao gồm phần padding, border, margin. Nó đặt đặt chiều cao và chiều rộng của vùng bên trong padding, border, margin của phần tử
Các giá trị của chiều cao và chiều rộng bao gồm:
- auto (mặc định) – Trình duyệt tính toán chiều cao và chiều rộng
- length – Xác định chiều cao và chiều rộng bằng px, cm,… v.v.
- % – Xác định chiều cao và chiều rộng theo phần trăm của màn hình trình duyệt
- initial – Đặt chiều cao và chiều rộng thành giá trị mặc định của nó
- inherit – Chiều cao và chiều rộng sẽ được kế thừa từ giá trị mẹ của nó
Ví dụ:
Ở đây, chiều cao của phần tử là 200px và chiều rộng là 50% chiều rộng của màn hình
2.Đặt chiều cao và chiều rộng tối đa trong CSS
Thuộc tính max-height và max-width được sử dụng để thiết lập chiều cao và chiều rộng tối đa của một phần tử
Ví dụ:
Ở đây, tôi đặt chiều rộng tối đa của phần tử là 500px và chiều cao tối đa là 100px
Lưu ý: Nếu vì lý do nào đó bạn sử dụng cả thuộc tính width và thuộc tính max-width trên cùng một phần tử, và giá trị của thuộc tính width lớn hơn thuộc tính max-width ; thuộc tính max-width sẽ được sử dụng (và thuộc tính width sẽ bị bỏ qua)
Ví dụ:
Ở đây, chiều rộng chỉ là 200px
3.Đặt chiều cao tối thiểu và chiều rộng tối thiểu trong CSS
Thuộc tính min-height và min-width được sử dụng để thiết lập chiều cao và chiều rộng tối thiểu của một phần tử
Nếu vì lý do nào đó bạn sử dụng cả thuộc tính width và thuộc tính min-width trên cùng một phần tử, và giá trị của thuộc tính width nhor hơn thuộc tính min-width ; thuộc tính min-width sẽ được sử dụng (và thuộc tính width sẽ bị bỏ qua)
Ví dụ:
Ở đây, tôi đặt chiều cao tối thiểu của phần tử là 200px và chiều rộng tối thiểu của phần tử là 100px
