What is Padding in CSS?

CSSmarkup~5 mins

Padding in CSS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Padding adds space inside an element, between its content and its border. It helps make content look neat and easy to read.

To create space around text inside a button so it looks clickable.

To separate content from the edges of a box so it doesn't touch the border.

To make clickable areas bigger without changing the text size.

To improve the look of forms by spacing input fields from their borders.

To add breathing room inside cards or containers on a webpage.

Syntax

CSS

padding: <top> <right> <bottom> <left>;

/* or */
padding-top: <value>;
padding-right: <value>;
padding-bottom: <value>;
padding-left: <value>;

You can set padding for all sides at once or each side separately.

Values can be in rem, em, %, or px units, but rem or em are better for accessibility.

Examples

Sets 1rem padding on all four sides.

CSS

padding: 1rem;

Sets 0.5rem padding top and bottom, 1rem left and right.

CSS

padding: 0.5rem 1rem;

Sets padding top 0.5rem, right 1rem, bottom 2rem, left 1.5rem.

CSS

padding: 0.5rem 1rem 2rem 1.5rem;

Sets padding only on top and bottom sides.

CSS

padding-top: 1rem;
padding-bottom: 1rem;

Sample Program

This example shows a blue box with padding on all sides but with different sizes. The text inside has space from the border, making it easier to read and visually balanced.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Padding Example</title>
  <style>
    .box {
      background-color: #cce5ff;
      border: 2px solid #004085;
      padding: 2rem 1.5rem 1rem 3rem;
      max-width: 300px;
      font-family: Arial, sans-serif;
      color: #004085;
    }
  </style>
</head>
<body>
  <main>
    <section>
      <article class="box" tabindex="0" aria-label="Example box with padding">
        This box has padding: 2rem top, 1.5rem right, 1rem bottom, and 3rem left.<br />
        Notice how the text does not touch the border and has space inside.
      </article>
    </section>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Padding adds space inside the element, unlike margin which adds space outside.

Using relative units like rem helps keep spacing consistent across different screen sizes and user settings.

Remember padding affects the total size of the element unless box-sizing is set to border-box.

Summary

Padding creates space inside an element between content and border.

You can set padding for all sides at once or individually.

Use padding to improve readability and visual balance on your webpage.