Styla sayspadding is the space inside an element, between its content and its border.
padding pushes content inward from the edge, inside any border, and takes the same 1-4 value shorthand as margin. Unlike margin it's never negative and shows the element's own background. It's what gives buttons and cards their comfortable inner breathing room.
Power-ups you unlock
padding = inner spacing (content to border)
Same 1-4 value shorthand as margin
Shows the element’s background, never negative
Adds to box size unless box-sizing:border-box
The Specificity Sphinx attacks — common mistakes
Using margin where padding (inner space) was meant
Padding inflating width without border-box
Negative padding (not allowed)
Boss battleGive a button generous padding and a card uniform padding; compare to using margin.