CssHow-ToBeginner · 3 min read

How to Set Padding in CSS: Simple Guide with Examples

Use the padding property in CSS to add space inside an element's border. You can set padding for all sides at once or specify each side individually using padding-top, padding-right, padding-bottom, and padding-left.

📐

Syntax

The padding property controls the space inside an element's border. You can use it in several ways:

padding: 10px; sets all four sides equally.
padding: 10px 20px; sets vertical (top and bottom) and horizontal (left and right) padding.
padding: 10px 15px 20px 25px; sets top, right, bottom, and left padding respectively.
Or use individual properties like padding-top, padding-right, padding-bottom, and padding-left to set each side separately.

css

/* Set all sides to 10px */
padding: 10px;

/* Set vertical to 10px, horizontal to 20px */
padding: 10px 20px;

/* Set top, right, bottom, left respectively */
padding: 10px 15px 20px 25px;

/* Individual sides */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;

💻

Example

This example shows a box with padding set on all sides. The padding creates space inside the box around the text.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Padding Example</title>
<style>
  .box {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    width: 200px;
    border: 2px solid #333;
  }
</style>
</head>
<body>
  <div class="box">This box has 20px padding on all sides.</div>
</body>
</html>

Output

A green rectangular box with white text inside. The text does not touch the edges because there is space (padding) of 20px inside the border.

⚠️

Common Pitfalls

Common mistakes when setting padding include:

Using padding with incorrect number of values or wrong order.
Confusing padding with margin, which adds space outside the element.
Not considering box-sizing, which affects how padding changes element size.

Remember, padding adds space inside the element's border, while margin adds space outside.

css

/* Wrong: Using three values but expecting left and right to be equal */
padding: 10px 20px 30px; /* left will be 20px, not 30px */

/* Right: Use four values to set all sides explicitly */
padding: 10px 20px 30px 20px;

📊

Quick Reference

Property	Description	Example
padding	Sets padding on all four sides	padding: 15px;
padding-top	Sets padding on the top side	padding-top: 10px;
padding-right	Sets padding on the right side	padding-right: 20px;
padding-bottom	Sets padding on the bottom side	padding-bottom: 10px;
padding-left	Sets padding on the left side	padding-left: 20px;

✅

Key Takeaways

Use the padding property to add space inside an element's border.

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

Padding affects the space inside the element, not outside.

Remember the order of values when using shorthand padding syntax.

Check box-sizing property to understand how padding affects element size.