CSS padding-left Property

The padding-left property controls the amount of space placed between an element’s left border and its content, effectively pushing content inward from the left edge of the element’s content box. Because padding is part of the element’s inner box, backgrounds and hit-testing (clickable/touchable area) extend into that padded region, so increasing left padding both visually and interactively moves content away from the border while keeping the padded area inside the element. For layouts that adapt to writing direction, consider using the logical alternative padding-inline-start and the related flow direction set by direction.

In the context of the CSS box model, left padding changes how much room the element’s content has and therefore interacts with how the element’s overall size is calculated; that interaction is influenced by box-sizing. Padding differs from outside spacing such as margin-left because margins affect space outside the element and can participate in margin-collapsing rules between block-level boxes, whereas padding remains internal and never collapses with adjacent margins. Because padding is painted and part of the element’s interior, designers often use it to visually separate text or controls from borders while keeping those areas part of the element’s background and hit area.

Behavior with different display types can vary: on inline-level boxes, left padding shifts the inline box’s content inward without introducing a new block-level gap, while in table cells it contributes to the cell’s inner spacing and affects how cell content wraps. Left padding also reduces the available width for content inside the box, which can influence when and how scrolling or overflow happens—so it interacts functionally with overflow handling such as overflow. For convenience and consistency, left padding can be set individually or managed together with other sides using the shorthand padding, but remembering the physical nature of padding-left (always the left edge) helps avoid layout surprises in multilingual or right-to-left contexts.