Thuộc tính max-width

Định nghĩa và sử dụng

Thuộc tính max-width thiết lập chiều rộng tối đa cho thành phần.

Cấu trúc

tag {
    max-width: giá trị;
}

Với giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
max-width đơn vị max-width: 50px; Chiều cao tính từ mép bên trái ngoài cùng của thành phần, đơn vị có thể là px, em, %, ...
none max-width: none; Không sử dụng chiều rộng lớn nhất, đây là dạng mặc định.
inherit max-width: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<div>
<p>Đoạn text này có chiều rộng lớn nhất là 120px.</p>
</div>
</body>
</html>

Giả sử ban đầu CSS viết:

div {
    border: 1px solid red;
}

Hiển thị trình duyệt khi chưa có thuộc tính max-width:

Đoạn text này có chiều rộng lớn nhất là 120px.

Thêm thuộc tính max-width vào CSS:

div {
    border: 1px solid red;
    max-width: 120px;
}

Hiển thị trình duyệt khi đã thêm max-width vào CSS:

Đoạn text này có chiều rộng lớn nhất là 120px.

Khi đã sử dụng thuộc tính max-width thì chiều rộng của box sẽ không vượt quá giá trị của max-width

Trình duyệt hỗ trợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

Thuộc tính max-width được hỗ trợ trong đa số các trình duyệt, ngoại trừ IE6.

Giá trị "inherit" trình duyệt IE8 đòi hỏi phải có !Doctype