CSS Height, Width and Max-width

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

Thuộc tính height và thuộc tính width được sử dụng để thiết lập chiều cao và chiều rộng của một phần tử HTML.

Thuộc tính height và thuộc tính width không bao gồm padding, border, hay margin. Chúng được sử dụng để thiết lập chiều cao/chiều rộng của vùng bên trong padding, border, và margin của phần tử HTML.

Các giá trị của thuộc tính height và thuộc tính width 

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

1. auto - Giá trị này là mặc định. Trình duyệt sẽ tự tính toán chiều cao và chiều rộng của phần tử.
2. length - Định nghĩa chiều cao/chiều rộng bằng một đơn vị cụ thể như px, pt, cm,...
3. % - Định nghĩa chiều cao/chiều rộng bằng phần trăm của khối chứa.
4. initial - Thiết lập chiều cao/chiều rộng thành giá trị mặc định của nó.
5. inherit - Chiều cao/chiều rộng sẽ được kế thừa từ phần tử cha của nó.

Các ví dụ về chiều cao và chiều rộng

Ví dụ sau sẽ thiết lập chiều cao và chiều rộng của một phần tử <div>:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Ví dụ sau sẽ thiết lập chiều cao và chiều rộng của một phần tử <div> khác:

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

Ghi chú: Hãy nhớ rằng thuộc tính height và thuộc tính width không bao gồm padding, border, hay margin! Chúng được sử dụng để thiết lập chiều cao/chiều rộng của vùng bên trong padding, border, và margin của phần tử HTML!

Thiết lập max-width

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

Thuộc tính max-width có thể được chỉ định bằng các giá trị đo độ dài, như px, pt, cm,..., hoặc bằng phần trăm (%) của khối chứa, hoặc được thiết lập thành none (giá trị này là mặc định. Có nghĩa là không có chiều rộng tối đa).

Vấn đề với phần tử <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ử này (500px). Trình duyệt sau đó sẽ thêm một thanh cuộn theo chiều ngang vào trang.

Hãy sử dụng thuộc tính max-width để thay thế, trong hoàn cảnh này, nó sẽ cải thiện việc xử lý cửa sổ nhỏ của trình duyệt.

Mẹo: Hãy kéo cửa sổ trình duyệt có độ rộng nhỏ hơn 500px, để xem sự khác nhau giữa hai phần tử div!

Ghi chú: Nếu như bạn vì một số lý do nào đó mà sử dụng cả hai thuộc tính width và 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ẽ được bỏ qua).

Ví dụ: Phần tử <div> này có chiều cao là 100 pixel và có thuộc tính max-width là 500 pixel: 

div {

        max-width: 500px;

        height: 100px;

        background-color: powderblue;

}

Tất cả các thuộc tính về kích thước trong CSS 

1. height: Thiết lập chiều cao của một phần tử.
2. max-height: Thiết lập chiều cao tối đa của một phần tử.
3. max-width: Thiết lập chiều rộng tối đa của một phần tử.
4. min-height: Thiết lập chiều cao tối thiểu của một phần tử.
5. min-width: Thiết lập chiều rộng tối thiểu của một phần tử.
6. width: Thiết lập chiều rộng của một phần tử.