คุณสมบัติ min-width

คุณสมบัติ min-width กำหนดความกว้างขั้นต่ำ ขององค์ประกอบ ค่าของคุณสมบัตินี้สามารถเป็น หน่วยวัดขนาด ใดๆ หรือคำสำคัญ none ซึ่งหมายถึงไม่มีการกำหนดค่า

โดยปกติจะกำหนดให้กับองค์ประกอบที่มีความกว้างแบบลอยตัว (ความกว้างถูกกำหนดเป็นเปอร์เซ็นต์หรือไม่ ได้ถูกกำหนดเลย และองค์ประกอบจะขยายความกว้าง ตามเนื้อหาของมัน) หากความกว้างขององค์ประกอบถูกกำหนด เป็นเปอร์เซ็นต์ - เมื่อลดขนาดหน้าต่างเบราว์เซอร์ ความกว้างจะลดลง จนกว่าจะถึงค่า min-width

ไวยากรณ์

ตัวเลือก {
	max-width: ค่า;
}

ตัวอย่าง

ในตัวอย่างนี้ ความกว้างเป็นเปอร์เซ็นต์ ของความกว้างขององค์ประกอบแม่ ลดขนาดหน้าต่างเบราว์เซอร์ ด้านความกว้าง และคอนเทนเนอร์ก็จะลดขนาดลงด้วย เพื่อปรับให้เข้ากับความกว้างของหน้าต่างเบราว์เซอร์ อย่างไรก็ตาม มันจะลดขนาดลงเพียงถึงค่าที่ กำหนดไว้ใน min-width ซึ่งคือ 400px เมื่อคอนเทนเนอร์มีความกว้างถึงค่านี้ - มันจะหยุดลดขนาด:

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

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

ตัวอย่าง

ในตัวอย่างนี้ ความกว้างของคอนเทนเนอร์ถูกจำกัด ทั้งสองด้าน: มันจะไม่สามารถใหญ่กว่า 900px และเล็กกว่า 400px:

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

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

ดูเพิ่มเติม

คุณสมบัติ max-width,
ซึ่งกำหนดความกว้างสูงสุดขององค์ประกอบ
คุณสมบัติ max-height,
ซึ่งกำหนดความสูงสูงสุดขององค์ประกอบ
คุณสมบัติ min-height,
ซึ่งกำหนดความสูงขั้นต่ำขององค์ประกอบ