Avoid setting height and let content dictate element size (a rule of thumb for CSS)

2020-04-08

The rule of thumb let content dictate element size and avoid setting height has proven valuable to me over a long period of time. I was just reflecting on it yesterday after seeing some vertically mis-aligned text in a button that had min-height set. Better would have been to set top and bottom padding, and let the height of the button be dictated by padding-top + content + padding-bottom.

Before getting too pedantic about this rule, I can already think of plenty of exceptions:

• Using min-height to set section height relative to the viewport
• Using row heights in a grid layout
• Using max-height in combination with overflow: auto or overflow: scroll to create an element with scrollable content once it reaches a certain height.
• Creating CSS-drawn graphics.

Where height, min-height, or max-height properties are used, one must consider how content will overflow or where there may be too little content relative to the height that has been set. However, in the normal case, avoiding the height properties altogether can often make life a lot easier.