CssHow-ToBeginner · 3 min read

How to Set Padding for Specific Sides in CSS Easily

To set padding for specific sides in CSS, use the properties padding-top, padding-right, padding-bottom, and padding-left. Each property controls the padding on one side of an element, allowing precise spacing control.

📐

Syntax

CSS provides four properties to set padding on each side of an element:

padding-top: sets padding on the top side
padding-right: sets padding on the right side
padding-bottom: sets padding on the bottom side
padding-left: sets padding on the left side

You can use these individually or together to control spacing.

css

selector {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 25px;
}

💻

Example

This example shows how to add different padding values to each side of a box. The box will have more space on the left and bottom sides.

css

html, body {
  height: 100%;
  margin: 0;
}
.box {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  color: white;
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 30px;
  padding-left: 40px;
  font-family: Arial, sans-serif;
}

Output

A green rectangle 200px wide and 100px tall with white text inside. The text is spaced 10px from the top, 15px from the right, 30px from the bottom, and 40px from the left edges.

⚠️

Common Pitfalls

One common mistake is using the shorthand padding property incorrectly when trying to set specific sides. Remember that padding with one value sets all sides equally, and with two to four values it follows a specific order (top, right, bottom, left).

Also, avoid mixing units inconsistently (like px and %) without understanding how they behave.

css

/* Wrong: trying to set only left padding but sets all sides */
.box {
  padding: 40px;
}

/* Right: set only left padding */
.box {
  padding-left: 40px;
}

📊

Quick Reference

Property	Description	Example Value
padding-top	Sets padding on the top side	10px
padding-right	Sets padding on the right side	15px
padding-bottom	Sets padding on the bottom side	20px
padding-left	Sets padding on the left side	25px

✅

Key Takeaways

Use padding-top, padding-right, padding-bottom, and padding-left to control padding on each side individually.

The shorthand padding property sets all sides and follows a specific order when using multiple values.

Avoid mixing units without understanding their effects on layout.

Setting padding correctly improves spacing and layout clarity in your design.