Thuộc tính min-width

Thuộc tính min-width thiết lập chiều rộng tối thiểu của phần tử. Giá trị của thuộc tính là bất kỳ đơn vị cho kích thước nào hoặc từ khóa none, có nghĩa là không có giá trị.

Thường được thiết lập cho phần tử có chiều rộng linh hoạt (chiều rộng được chỉ định bằng phần trăm hoặc không được chỉ định chút nào, và phần tử mở rộng chiều rộng theo nội dung của nó). Nếu chiều rộng của phần tử được chỉ định bằng phần trăm - khi thu nhỏ cửa sổ trình duyệt nó sẽ giảm cho đến khi đạt tới giá trị min-width.

Cú pháp

bộ chọn {
	max-width: giá trị;
}

Ví dụ

Trong ví dụ này, chiều rộng chiếm phần trăm so với chiều rộng của phần tử cha. Hãy thu nhỏ cửa sổ trình duyệt theo chiều rộng, và bộ chứa cũng sẽ thu nhỏ để điều chỉnh theo chiều rộng cửa sổ trình duyệt. Tuy nhiên, nó sẽ chỉ giảm xuống tới giá trị được xác định trong min-width, đó là 400px. Khi bộ chứa đạt tới chiều rộng này - nó sẽ ngừng thu nhỏ:

<div id="elem"></div>

#elem {
	width: 70%;
	min-width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ví dụ

Trong ví dụ này, chiều rộng của bộ chứa bị giới hạn từ cả hai phía: nó không thể trở nên lớn hơn 900px và nhỏ hơn 400px:

<div id="elem"></div>

#elem {
	width: 70%;
	min-width: 400px;
	max-width: 900px;
	height: 100px;
	border: 1px solid black;
}

Xem thêm

thuộc tính max-width,
thiết lập chiều rộng tối đa của phần tử
thuộc tính max-height,
thiết lập chiều cao tối đa của phần tử
thuộc tính min-height,
thiết lập chiều cao tối thiểu của phần tử