Thuộc tính min-width

Đăng bởi: Admin

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

Thuộc tính min-width thiết lập chiều rộng tối thiểu (nhỏ nhất) cho thành phần.

Sử dụng khi giới hạn chiều rộng nhỏ nhất cho thành phần, không làm mất background khi text ít hơn hay khi zoom window.

Cấu trúc

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

Với giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
min-width	đơn vị	min-width: 500px;	Chiều rộng 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, %, ...
min-width	inherit	min-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 tối thiểu là 200px.</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 min-width:

Đoạn text này có chiều rộng tối thiểu là 200px.

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

div {
    border: 1px solid red;
    min-width: 200px;
}

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

Đoạn text này có chiều rộng tối thiểu là 200px.

Khi nội dung mở rộng thì chiều rộng của box được tăng thêm, nhưng khi nội dung thu hẹp (zoom window) thì giá trị chiều rộng nhỏ nhất sẽ bằng với giá trị min-width, chiều rộng lúc này không thể nhỏ hơn giá trị min-width.

Trình duyệt hỗ trợ

Thuộc tính min-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

Link liên quan

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!