Leaderboard ads banner

CSS Height và Width

Thiết Lập Chiều Cao Và Chiều Rộng

Thuộc tính heightwidth được sử dụng để quy định chiều cao và chiều rộng cho một phần tử.

Thuộc tính heightwidth có thể được thiết lập giá trị là auto (mặc định. Giá trị sẽ được tự động thiết lập bởi trình duyệt web).

Cả hai thuộc tính còn có thể sử dụng các đơn vị đo lường như pixel (px), centimet (cm), phần trăm (%),...

Ví dụ quy định một phần tử có chiều cao và chiều rộng lần lượt là 100px và 200px:

div {  
           height: 100px;
           width: 500px;
           background-color: powderblue;  
 }    

Thiết Lập max-width

Thuộc tính max-width được sử dụng để quy định chiều rộng tối đa cho một phần tử, được mặc định giá trị là none (không có chiều rộng tối đa).

max-width có thể sử dụng các đơn vị đo lường như pixel (px), centimet (cm), phần trăm (%) dựa trên phần tử khối (Block) chứa nó,...

Khi sử dụng thẻ <div>, một vấn đề sẽ phát sinh khi cửa sổ trình duyệt có chiều rộng nhỏ hơn so với chiều rộng của phần tử (500px). Trình duyệt khi đó sẽ thêm một thanh cuộn ngang vào trang.

Sử dụng max-width, vấn đề trên sẽ được giải quyết với các trình duyệt có cửa sổ nhỏ.

div {
           height: 100px;
           max-width: 500px;
           background-color: powderblue;  
}  

Ghi chú: Giá trị của max-width được ưu tiên hơn so với giá trị width.

Các Thuộc Tính Liên Quan Đến Height Và Width Trong CSS

  • height: Quy định chiều cao của phần tử
  • max-height: Quy định chiều cao tối đa của phần tử
  • max-width: Quy định chiều rộng tối đa của phần tử
  • min-height: Quy định chiều cao tối thiểu của phần tử
  • min-width: Quy định chiều rộng tối thiểu của phần tử
  • width: Quy định chiều rộng của phần tử
Nội dung không được để trống

Hướng Dẫn Liên Quan