CSS Padding: Spacing Inside Elements

CSS padding adds space inside an element, between its content and its border. Learn padding sides, the shorthand, how padding affects width, and bigger click areas.

What is CSS padding?

Padding is the space between the content of a box and its border. It is like the soft padding inside a phone case: it sits inside the case and keeps the phone from touching the edge. Unlike margin, padding is inside the box, so it shows the element's background color.

Padding values can be lengths (px, rem, em) or percentages. Padding can never be negative, and it cannot be auto.

<p class="alert">Your changes have been saved.</p>

.alert {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 12px 16px;
}

You will see a green message box. The text has 12px of green space above and below it, and 16px on the left and right, so it doesn't touch the border.

Padding on each side and the shorthand

Each side has its own property: padding-top, padding-right, padding-bottom and padding-left. The padding shorthand takes 1 to 4 values, clockwise from the top, exactly like margin:

Shorthand	Result
padding: 16px;	16px on all sides.
padding: 8px 16px;	8px top and bottom, 16px left and right.
padding: 8px 16px 24px;	8px top, 16px left and right, 24px bottom.
padding: 8px 16px 24px 32px;	Top, right, bottom, left.

A good habit is to use slightly more padding on the left and right than on the top and bottom. Text boxes and buttons usually look better that way.

Tip: Use rem or em for padding on buttons. With padding: 0.5em 1em;, a button with bigger text automatically gets bigger padding too, so it keeps its shape.

How does padding affect width?

By default, padding is added to the width you set. A box with width: 300px and padding: 20px takes up 340px on the page (300 + 20 left + 20 right). This often breaks layouts.

.sidebar {
  width: 300px;
  padding: 20px;
}

.sidebar-fixed {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
}

The first sidebar is 340px wide in total. The second one is exactly 300px, because box-sizing: border-box puts the padding inside the width. The content area simply becomes 260px. That's why most sites set *, *::before, *::after { box-sizing: border-box; } at the top of their CSS, as you saw in the box-sizing lesson.

A percentage padding is based on the width of the parent, for all four sides. So padding-top: 50% makes a space half as tall as the parent is wide. Before aspect-ratio existed, this was the famous trick for keeping boxes at a fixed shape.

Padding on inline elements

Inline elements like <a>, <span> and <strong> behave differently. Left and right padding push neighboring text away as you'd expect. But top and bottom padding do not push other lines away. The background grows up and down, and it can overlap the lines above and below.

<p>Status: <span class="tag">Shipped</span> on Monday. Your parcel will arrive soon, and you can track it at any time from your account page.</p>

.tag {
  background: #e0e7ff;
  color: #3730a3;
  padding: 2px 8px;
  border-radius: 4px;
}

The word "Shipped" gets a small colored label. The 8px on the sides create space between the label and the words next to it. The 2px on top and bottom make the background a bit taller, but the line spacing stays the same. If you used a large vertical padding like 12px, the label would cover parts of the lines around it. To make vertical padding take up real space, change the element to display: inline-block.

Bigger clickable areas for buttons and links

Padding is part of an element's clickable area, but margin is not. That makes padding the right tool for comfortable buttons and menu links. Small click targets are hard to hit on a phone. A common guideline is to make tap targets at least 44 by 44 pixels (WCAG requires at least 24 by 24).

<nav class="menu">
  <a href="/">Home</a>
  <a href="/shop">Shop</a>
  <a href="/contact">Contact</a>
</nav>
<button class="btn">Add to cart</button>

.menu a {
  display: inline-block;
  padding: 12px 16px;
  color: #1e293b;
  text-decoration: none;
  border-radius: 6px;
}

.menu a:hover {
  background: #f1f5f9;
}

.btn {
  padding: 0.75em 1.5em;
  font-size: 1rem;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
}

Each menu link now has a large, padded hit area. When you hover, you can see it: the whole light-gray rectangle is clickable, not just the letters. The button has generous padding based on its font size, so it is easy to tap on a phone.

Common mistake: Using margin to space out menu links. The gaps between links are then not clickable, and users miss the link. Put the space in padding on the link itself.

Practice exercise

Create a "tag list" of five topics (for example HTML, CSS, JavaScript) shown as inline labels in a paragraph, and a row of three call-to-action buttons below. Give the tags small padding and the buttons bigger padding in em. Then give one button a larger font-size and check that its padding grows with it.

Hint: put box-sizing: border-box on everything first, and use DevTools to measure the button height. Is it at least 44px?

Key takeaways

• Padding is space inside the border and shows the element's background.
• The shorthand uses 1 to 4 values clockwise from the top; padding can't be negative.
• Without box-sizing: border-box, padding is added to the width.
• Vertical padding on inline elements doesn't push lines apart; use inline-block if you need that.
• Use padding, not margin, to make links and buttons easy to click and tap.