Thuộc tính max-width trong CSS

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

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

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

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

Bình luận