While styling with CSS, I've noticed that the padding property can easily achieve the same affect as the height property... however the padding property keeps my text nice and center, whereas the height property forces me to add other CSS rules / adjust line height.
Is it "wrong" or against commonly used CSS standards to ditch the height property and use padding for the height of an element instead?
What repercussions might this bring?
Both height and padding inherently control the height of an element. I would have to disagree that using padding is wrong, but rather depends on the specific use case.
Use height when you need a fixed container size.
- PRO: Useful for when you don't want the container to stretch vertically.
- CON: Becomes brittle as you change properties like font-size, margin, padding, etc.
- Increasing sizes can cause contents to hide or overflow.
- Changing a font-size, for example, can cause a cascade change (you have to also change the margins/padding, or size properties of sibling/child elements.
Use padding when you don't need a fixed container height, but want to add whitespace.
- PRO: Easier to change font-sizes, margins, paddings, and add additional content to the container that may increase the container's vertical size.
- CON: Adding content/increasing size properties will cause the container to stretch vertically, which is undesirable in some scenarios.
- Not good for scenarios where vertical space is limited or needs to be controlled.
Use min-height and max-height for a hybrid approach.
- PRO: Forces a fixed height, but allows content to grow dynamically until it reaches that min or max.
- CON: You still have the "cascade" update problem with size properties and added content once you hit the min or max.