CSS padding Property

The padding property defines the inward space between an element’s content and its border — essentially the element’s internal breathing room inside the CSS box model. Because that space is inside the element’s box, increasing padding will change the amount of space available for the content and, depending on how the box is sized, can affect the element’s overall footprint on the page; this behavior is controlled by box-sizing. Padding is part of the element’s painted area and contributes to the visual relationship between content and its container.

Padding is painted with an element’s background and sits inside the border edge, which means a background fills the content area plus the padding area but stops at the border; the border itself visually separates the padded interior from surrounding elements, so padding and border work together to shape an element’s interior and edge appearance (background, border). Because the background extends into the padding, adjusting padding can noticeably change the look of backgrounds and backgrounds with transparency. Padding also increases the clickable or interactive area of elements (for example, links and buttons), which makes it a useful tool for improving usability and touch targets without altering visual spacing between elements.

Padding behaves differently from the space outside an element: margins. Unlike margins, padding never collapses with adjacent vertical spacing; it remains strictly inside the element’s box and will not combine with the margins of sibling or parent elements (margin). For inline-level elements, horizontal padding shifts surrounding text and affects line layout in predictable ways; vertical padding on inline elements contributes to the line box and can influence vertical alignment and line height, which may in turn change how lines wrap and stack.

Practical layout consequences arise because padding reduces the room available for content and can therefore trigger clipping, scrolling, or overflow behavior when content no longer fits; how that situation is handled depends on the element’s overflow handling (overflow). In responsive design and UI work, padding is commonly preferred for controlling internal spacing because it preserves the element’s margins and external relationships while increasing internal comfort for content and controls, improving readability and interaction without shifting external layout relationships.