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

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

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

หากกำหนดความสูงขั้นต่ำไว้ องค์ประกอบจะไม่สามารถ มีความสูงน้อยกว่าค่านี้ได้ ถ้า ข้อความน้อยกว่าที่ต้องการสำหรับ min-height, องค์ประกอบจะมีความสูง min-height

แต่ถ้ามีข้อความมากกว่า - ความสูงขององค์ประกอบจะถูกคำนวณ ตามปริมาณของข้อความ

ไวยากรณ์

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

ตัวอย่าง

ในตัวอย่างนี้ไม่ได้กำหนดความสูงเลย และจะถูกคำนวณโดยเบราว์เซอร์โดยอัตโนมัติ ตามปริมาณข้อความ อย่างไรก็ตาม เนื่องจากมีการกำหนดคุณสมบัติ min-height, ความสูงจะไม่ลดลงต่ำกว่าค่านี้ แม้ว่าจะไม่มีข้อความอยู่ในนั้นเลยก็ตาม:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

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

ตัวอย่าง

ลองเพิ่มข้อความให้องค์ประกอบมากขึ้น - เพื่อให้เกิดการล้นของบล็อกตาม ความสูง ในกรณีนี้บล็อกของเราก็เพียงแค่จะเพิ่ม ความสูงของตัวเอง:

<div id="elem">
	some long text
</div>

#elem {
	min-height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

ตัวอย่าง

เพื่อการเปรียบเทียบ มาดูกันว่าจะเกิดอะไรขึ้น กับบล็อก หากเอา min-height ออก และกำหนดคุณสมบัติ height แทน:

<div id="elem">
	some long text
</div>

#elem {
	height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
	margin-bottom: 50px;
}

ดูเพิ่มเติม

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