Avoid setting height and let content dictate element size (a rule of thumb for CSS)
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
Before getting too pedantic about this rule, I can already think of plenty of exceptions:
min-heightto set section height relative to the viewport
- Using row heights in a grid layout
max-heightin combination with
overflow: scrollto create an element with scrollable content once it reaches a certain height.
- Creating CSS-drawn graphics.
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.