min-height vs px
i notice quite a few people using
min-height to set a fixed height of an element rather than height, for example, min-height: 20px; over height: 20px, could anyone explain why people opt for this and it's benefits? is it a recommended practice or a optional one?3 Replies
min-height-20px just means that the height won’t get any smaller than 20px, where height: 20px fixes the height at 20px. Usually you’d set the height to something like a percentage of the parent height or a vh unit so the element can grow or shrink with the screen height, with min-height clamping the height at a lower bound.An example: If the user has set a higher base font-size the element with
height: 20px would overflow, whereas the element with min-height: 20px would grow to contain the now larger text.
My general rule of thumb is: if you set height on an element, put a comment there explaining why, if you can't height is not the right way.ah i see now, thank you for the information