CSS đặt height và width
Các thuộc tính height và width được sử dụng để đặt height và width của một element. Các thuộc tính height và width không bao gồm padding, border hoặc margin. Nó đặt height/width của khu vực bên trong padding, border và margin của element.
CSS height và width Values
Thuộc tính height và width có thể có các giá trị sau:
- auto - margin được trình duyệt tự động tính
- length - chỉ định chiều rộng margin bằng px, pt, cm, etc.
- % - chỉ định margin tính bằng % chiều rộng của element hiện tại
- inherit - chỉ định rằng margin phải được kế thừa từ element cha
Ví dụ
div { height: 200px; width: 50%; background-color: powderblue; }
Lưu ý: Hãy nhớ rằng các thuộc tính height và width không bao gồm padding, border hoặc margin! Nó chỉ thiết lập height / width của khu vực bên trong padding, border và margin của element!
CSS max-width
Thuộc tính max-width được sử dụng để đặt chiều rộng tối đa của một element.
max-width có thể được chỉ định trong các giá trị chiều dài, như px, cm, v.v. hoặc theo phần trăm (%) của element chứa hoặc đặt thành none (đây là mặc định, có nghĩa là không có chiều rộng tối đa).
Sự cố với <div> ở trên xảy ra khi cửa sổ trình duyệt nhỏ hơn width của element (500px). Sau đó, trình duyệt sẽ thêm một thanh cuộn ngang vào trang.
Thay vào đó, sử dụng max-width, trong trường hợp này, sẽ cải thiện khả năng xử lý các cửa sổ nhỏ của trình duyệt.
Lưu ý: Nếu bạn vì một số lý do, hãy sử dụng cả thuộc tính width và thuộc tính max-width trên cùng một element 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).
div { max-width: 500px; height: 100px; background-color: powderblue; }