Chiều cao, chiều rộng và chiều rộng tối đa của CSS

Thuộc tính height và width CSS được sử dụng để đặt chiều cao và chiều rộng của một phần tử.

Thuộc tính CSS max-width được sử dụng để đặt chiều rộng tối đa của một phần tử.

CSS Thiết lập chiều cao và chiều rộng

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ử.

Thuộc tính chiều cao và chiều rộng không bao gồm phần đệm, đường viền hoặc lề. Nó đặt chiều cao/chiều rộng của khu vực bên trong phần đệm, đường viền và lề của phần tử.

Giá trị chiều cao và chiều rộng CSS

Thuộc tính height và width có thể có các giá trị sau:

• auto - Đây là 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/chiều rộng tính bằng px, cm, v.v.
• % - Xác định chiều cao/chiều rộng theo phần trăm của khối chứa
• initial - Đặt chiều cao/chiều rộng thành giá trị mặc định của nó
• inherit - Chiều cao/chiều rộng sẽ được kế thừa từ giá trị gốc của nó

Chiều cao và chiều rộng CSS

Lưu ý: Hãy nhớ rằng các thuộc tính height và width không bao gồm phần đệm, đường viền hoặc lề! Họ đặt chiều cao/chiều rộng của khu vực bên trong phần đệm, đường viền và lề của phần tử!

Đặt chiều rộng tối đa

Thuộc tính max-width được sử dụng để đặt chiều rộng tối đa của một phần tử.

Độ max-width có thể được chỉ định theo các giá trị độ dài , như px, cm, v.v. hoặc theo phần trăm (%) của khối chứa hoặc được đặt thành không (đâ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 chiều rộng của phần tử (500px). Trình duyệt sau đó thêm một thanh cuộn ngang vào trang.

Thay vào đó, việc 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.

Mẹo: Kéo cửa sổ trình duyệt có chiều rộng nhỏ hơn 500px để thấy sự khác biệt giữa hai div!

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).

Hãy tự mình thử - Ví dụ

Đặt chiều cao và chiều rộng của các phần tử
Ví dụ này minh họa cách thiết lập chiều cao và chiều rộng của các phần tử khác nhau.

Đặt chiều cao và chiều rộng của hình ảnh bằng phần trăm
Ví dụ này minh họa cách đặt chiều cao và chiều rộng của hình ảnh bằng giá trị phần trăm.

Đặt chiều rộng tối thiểu và chiều rộng tối đa của một phần tử
Ví dụ này minh họa cách đặt chiều rộng tối thiểu và chiều rộng tối đa của một phần tử bằng giá trị pixel.

Đặt chiều cao tối thiểu và chiều cao tối đa của một phần tử
Ví dụ này minh họa cách đặt chiều cao tối thiểu và chiều cao tối đa của một phần tử bằng giá trị pixel.

<phong cách>
h1 {
  : 100px;
}
</style>

<cơ thể>
  <h1>Đây là tiêu đề</h1>
  <p>Đây là một đoạn văn</p>
  <p>Đây là một đoạn văn</p>
</body>

Tất cả thuộc tính thứ nguyên CSS