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

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

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

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

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

ไวยากรณ์

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

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ดูเพิ่มเติม