html
/

CSS Padding

Last Sync: Today

On this page

11
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

CSS Padding

What is Padding?

Padding is the space inside an element, between its content and border. It controls internal spacing.

Basic Padding

CSSRead-only
1
div {
  padding: 20px;
}

Individual Sides

CSSRead-only
1
div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

Shorthand Property

CSSRead-only
1
div {
  padding: 10px 20px 30px 40px;
}

Shorthand Variations

ValuesMeaning
1 valueAll sides
2 valuesTop/Bottom, Left/Right
3 valuesTop, Left/Right, Bottom
4 valuesTop, Right, Bottom, Left

Padding and Box Model

Padding increases the total size of an element unless box-sizing: border-box is used.

CSSRead-only
1
div {
  width: 200px;
  padding: 20px;
  box-sizing: border-box;
}

Padding Example

CSSRead-only
1
button {
  padding: 10px 20px;
}

Difference: Padding vs Margin

PropertyDescription
PaddingSpace inside element
MarginSpace outside element

Best Practices

  • Use padding for internal spacing
  • Use shorthand for clean code
  • Use box-sizing to control layout size
  • Maintain consistent spacing across UI

Common Mistakes

  • Confusing padding with margin
  • Breaking layout due to extra padding
  • Not using box-sizing
  • Inconsistent spacing values

Conclusion

CSS padding controls spacing inside elements and is essential for layout, readability, and UI design.

Try it yourself

div {
  padding: 20px;
  background: lightblue;
}

Test Your Knowledge

Q1
of 3

Padding is applied where?

A
Outside
B
Inside
C
Border
D
Center
Q2
of 3

Which controls internal spacing?

A
margin
B
padding
C
border
D
gap
Q3
of 3

Which property controls sizing behavior?

A
box-sizing
B
display
C
position
D
overflow

Frequently Asked Questions

What is padding?

Space inside an element between content and border.

Does padding affect size?

Yes, unless box-sizing: border-box is used.

Padding vs margin?

Padding is inside, margin is outside.

Previous

css margin

Next

css width height

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.