CSS padding Property

The padding property sets the inner space between an element's content and its border. It acts as a buffer to prevent content from touching the edges of its container.

selector { padding: <value>; }

<length>	Specifies a fixed inner space using units like px, em, or rem.
<percentage>	Sets the padding as a percentage of the width of the containing element.

Code Examples

A basic example showing how the shorthand padding property creates space inside a container.

<div style="padding: 40px; background-color: #f0f0f0; border: 2px solid #333333; font-family: sans-serif;">
  This container uses 40px of padding to create a uniform buffer between this text and the dark border.
</div>

An advanced example using JavaScript to dynamically toggle padding and background colors for a smooth UI transition.

<div id="ui-card" style="padding: 15px; background-color: #007bff; color: #ffffff; display: inline-block; border-radius: 8px; transition: padding 0.4s ease;">
  Interactive Card
</div>
<button onclick="expandCard()">Toggle Spacing</button>

<script>
function expandCard() {
  const card = document.getElementById("ui-card");
  const isExpanded = card.style.padding === "50px";
  card.style.padding = isExpanded ? "15px" : "50px";
  // Using a hex value in JS requires quotes
  card.style.backgroundColor = isExpanded ? "#007bff" : "#28a745";
}
</script>

Pro Tip

Use the mnemonic "TRouBLe" (Top, Right, Bottom, Left) to remember the clockwise order of values in the shorthand property. If you need a perfectly responsive square, you can set the height of an element to zero and use a percentage for "padding-top" or "padding-bottom", as that percentage is based on the width of the element.

Deep Dive

Think of padding as the cushion inside a shoe; it provides the gap between your foot (the content) and the shoe itself (the border). In the CSS Box Model, padding sits inside the border but outside the content area. It takes on the background color or image of the element it belongs to. By default, adding padding increases the total size of the element, making the box larger unless you change how the browser calculates size using the "box-sizing" property. You can define padding for all four sides at once using shorthand or target specific sides individually. When using percentages, the value is always calculated relative to the width of the parent container, which applies to both horizontal and vertical padding.

Best Practices

Always apply "box-sizing: border-box" to your elements so that padding is included within the defined width and height, preventing layout breaks. Use the shorthand property to keep your code succinct; for example, "padding: 10px 20px" handles the top/bottom and left/right in one go. Favor relative units like "em" or "rem" for padding to ensure your spacing scales proportionally when users adjust their browser font sizes.

Common Pitfalls

A common mistake is forgetting that padding adds to the total width of an element. If a container is set to "width: 100%" and you add "padding: 20px", it will likely overflow its parent. Also, vertical padding does not behave the same way on non-replaced inline elements like "span" or "a" tags; they may overlap surrounding lines of text unless you change their display to "inline-block" or "block".

Accessibility

Generous padding on interactive elements like buttons and links is a huge win for accessibility because it increases the "hit area," making it much easier for users with motor impairments to click. Don't let your text hug the borders of a container; proper white space via padding improves readability and focus for users with visual or cognitive challenges.

Dev Data Table: padding property

default	0
animatable	yes
inherited	no
experimental	no
year_intro	1996
year_standard	1996
js_syntax_1	element.style.padding = "20px";
js_syntax_2	element.style.setProperty("padding", "20px");
js_note	When manipulating padding in JavaScript, you must provide the value as a string including the unit, such as "20px" or "1.5em", or the browser will ignore the assignment.
browsers	{ "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 4, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": "1.0", "Opera Mobile": 10 }