CSS Padding

Space inside an element, around its content.

✍️ 3 exercises + code challenge in this lesson

❮ Previous Next ❯

Padding creates space between an element's content and its border.

padding-top, padding-right, padding-bottom, padding-left
Shorthand works like margin: padding: 10px 20px;

Padding takes the element's background colour; margin is always transparent.

By default padding is added to the width. Use box-sizing: border-box to keep the total width fixed (see the Box Model lesson).

Key Takeaways: CSS Padding

Mastering CSS Padding helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

CSS Padding Code Example

CSS

<style>
  p { background: #071A2F; color: white; border-radius: 8px; }
  .small { padding: 5px; }
  .big   { padding: 25px 40px; }
  .left  { padding-left: 80px; }
</style>

<p class="small">padding: 5px</p>
<p class="big">padding: 25px 40px</p>
<p class="left">padding-left: 80px</p>

Free sign-in required · Google login available

CSS Padding Practice Exercises

Check what you learned in “CSS Padding”.

/ 3 solved

Fill in the blank

Add 10px padding on top and bottom and 20px left and right.

button {
  padding: ;
}

✓ Correct! Not quite. Try again.

Multiple choice

Padding is the space…

between the content and the border outside the border between two elements around the page

✓ Correct! Not quite. Try again.

Code challenge

Give the button 12px padding on all sides.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

CSS Padding

💡 Key Takeaways: CSS Padding

CSS Padding Code Example

CSS Padding Practice Exercises

Key Takeaways: CSS Padding