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 padding-top + content + padding-bottom.

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

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.

Leave a Reply

Your email address will not be published.

Color scheme: