What is padding?

Padding is the empty space that sits inside a visual element, between the element’s actual content (like text or an image) and its outer border. In web design, you set padding with CSS to push the content away from the edges of its container.

Let's break it down

  • Top, Right, Bottom, Left - Padding can be set for each side individually (padding‑top, padding‑right, etc.).
  • Shorthand - You can write all four values in one line (e.g., padding: 10px 20px 15px 5px).
  • Units - Common units are pixels (px), ems (relative to font size), percentages (relative to the container’s width), and rems (relative to the root font size).
  • Box model - Padding is part of the CSS box model; it adds to the element’s total width and height unless you use box-sizing: border-box.

Why does it matter?

Padding controls how “breathing room” the content has, which directly impacts readability, visual balance, and click‑ability. Proper padding makes interfaces feel less cramped, helps users focus on important information, and ensures that interactive elements (buttons, links) are easy to tap or click.

Where is it used?

  • Web pages - Every HTML element (divs, paragraphs, images, buttons) can have padding.
  • Email templates - Padding keeps content from touching the email client’s edges.
  • Mobile apps - UI frameworks (React Native, Flutter, SwiftUI) use padding to space components.
  • Design tools - Sketch, Figma, and Adobe XD let designers set padding to prototype layouts.

Good things about it

  • Simple, declarative way to manage internal spacing.
  • Improves user experience by making content easier to read and interact with.
  • Works consistently across browsers when the CSS box model is understood.
  • Can be animated or changed responsively for dynamic layouts.

Not-so-good things

  • Adds to the element’s total size, which can cause layout overflow if not accounted for.
  • Over‑padding can make designs look “fluffy” and waste screen real estate, especially on small devices.
  • In complex nested layouts, too many padding rules can become hard to track and maintain.
  • If box-sizing isn’t set correctly, padding may break the intended dimensions, leading to unexpected shifts.