CSS padding-top Property

The padding-top property defines the amount of space between the top edge of an element's content and its top border.

selector { padding-top: value; }

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

Code Examples

A basic example showing how padding-top creates internal space between the content and the top border.

<div style="background-color: #f0f0f0; border: 2px solid #333333; padding-top: 50px;">
  This text has 50 pixels of space above it, inside the border.
</div>

An advanced example using JavaScript to dynamically update the padding-top property with a CSS transition for a smooth effect.

<div id="box" style="background-color: #006699; color: #ffffff; padding-top: 10px; transition: padding 0.3s;">
  Dynamic Header Space
</div>
<button onclick="expandPadding()">Expand</button>

<script>
function expandPadding() {
  const box = document.getElementById("box");
  box.style.paddingTop = "100px";
}
</script>

Pro Tip

You can use the CSS calc() function to create a dynamic top gutter that combines fixed and relative units, like padding-top: calc(2% + 10px). This ensures you always have at least 10px of space, but it grows slightly as the screen gets wider. Also, if you need to maintain a specific aspect ratio for a responsive box, using percentage padding on the top or bottom is the classic way to make height scale relative to width.

Deep Dive

Think of padding-top as the interior insulation in the roof of a house. It creates a gap between the ceiling (the border) and your head (the content). Unlike margin, which pushes neighboring houses away from your exterior walls, padding stays inside the element. When you apply a background color or image, it fills this padding area. By default, adding padding-top increases the total height of your element because it sits on top of the content box. To prevent this growth and keep your height dimensions predictable, you should use the box-sizing: border-box property on your elements.

Best Practices

Use padding-top to give your content breathing room so it does not look crowded against the top edge of its container. For responsive designs that scale well, prefer relative units like rem or em over fixed pixels. If you find yourself applying the same padding-top to many siblings, consider if a gap property on a flex or grid parent might be more efficient for managing your layout spacing.

Common Pitfalls

The most common mistake is forgetting that padding-top adds to the total height of an element in the default box model. If an element has a height of 100px and you add 20px of padding-top, the actual rendered height becomes 120px. Another head-scratcher for beginners is that percentage-based padding-top values are calculated based on the width of the parent container, not the parent's height.

Accessibility

Ensure that your top padding does not push essential content too far down the page on smaller mobile screens, which might force users to scroll excessively to reach the main information. While padding does not directly affect screen readers, it heavily impacts the visual hierarchy and readability for users with low vision or cognitive disabilities.

Dev Data Table: padding-top property

default	0
animatable	yes
inherited	no
experimental	no
year_intro	1996
year_standard	1996
js_syntax_1	element.style.paddingTop = "20px";
js_syntax_2	element.style.setProperty("padding-top", "20px");
js_note	In JavaScript, the value must be passed as a string and include the unit of measurement, such as "px" or "em".
browsers	{ "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10 }