Bird
Raised Fist0
CSSmarkup~5 mins

Padding in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Padding adds space inside an element, between its content and its border. It helps make content look neat and easy to read.

To create space around text inside a button so it looks clickable.
To separate content from the edges of a box so it doesn't touch the border.
To make clickable areas bigger without changing the text size.
To improve the look of forms by spacing input fields from their borders.
To add breathing room inside cards or containers on a webpage.
Syntax
CSS
padding: <top> <right> <bottom> <left>;

/* or */
padding-top: <value>;
padding-right: <value>;
padding-bottom: <value>;
padding-left: <value>;

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

Values can be in rem, em, %, or px units, but rem or em are better for accessibility.

Examples
Sets 1rem padding on all four sides.
CSS
padding: 1rem;
Sets 0.5rem padding top and bottom, 1rem left and right.
CSS
padding: 0.5rem 1rem;
Sets padding top 0.5rem, right 1rem, bottom 2rem, left 1.5rem.
CSS
padding: 0.5rem 1rem 2rem 1.5rem;
Sets padding only on top and bottom sides.
CSS
padding-top: 1rem;
padding-bottom: 1rem;
Sample Program

This example shows a blue box with padding on all sides but with different sizes. The text inside has space from the border, making it easier to read and visually balanced.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Padding Example</title>
  <style>
    .box {
      background-color: #cce5ff;
      border: 2px solid #004085;
      padding: 2rem 1.5rem 1rem 3rem;
      max-width: 300px;
      font-family: Arial, sans-serif;
      color: #004085;
    }
  </style>
</head>
<body>
  <main>
    <section>
      <article class="box" tabindex="0" aria-label="Example box with padding">
        This box has padding: 2rem top, 1.5rem right, 1rem bottom, and 3rem left.<br />
        Notice how the text does not touch the border and has space inside.
      </article>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Padding adds space inside the element, unlike margin which adds space outside.

Using relative units like rem helps keep spacing consistent across different screen sizes and user settings.

Remember padding affects the total size of the element unless box-sizing is set to border-box.

Summary

Padding creates space inside an element between content and border.

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

Use padding to improve readability and visual balance on your webpage.

Practice

(1/5)
1. What does the CSS padding property do in a webpage layout?
easy
A. It sets the font size of the text inside the element.
B. It adds space outside the element's border.
C. It changes the color of the element's background.
D. It creates space inside an element between the content and its border.

Solution

  1. Step 1: Understand padding's role

    Padding adds space inside the element, between content and border, not outside.

  2. Step 2: Differentiate from margin and other properties

    Margin adds space outside the border, background color changes color, font size changes text size.

  3. Final Answer:

    It creates space inside an element between the content and its border. -> Option D

  4. Quick Check:

    Padding = space inside element [OK]
Hint: Padding is inside space, margin is outside space [OK]
Common Mistakes:
  • Confusing padding with margin
  • Thinking padding changes background color
  • Mixing padding with font size
2. Which of the following is the correct CSS syntax to set padding of 20 pixels on all sides of an element?
easy
A. padding: 20px;
B. padding: 20;
C. padding: 20px all;
D. padding: all 20px;

Solution

  1. Step 1: Review CSS padding syntax

    The correct way to set padding on all sides is using a single value with units, like padding: 20px;.

  2. Step 2: Identify invalid syntax

    padding: 20; misses units, padding: 20px all; and padding: all 20px; use invalid keywords.

  3. Final Answer:

    padding: 20px; -> Option A

  4. Quick Check:

    Use units and no extra keywords [OK]
Hint: Always include units like px for padding values [OK]
Common Mistakes:
  • Omitting units like px
  • Adding invalid keywords like 'all'
  • Using wrong order or syntax
3. Given the CSS rule:
div { padding: 10px 20px 30px 40px; }

What is the padding on the right side of the div element?
medium
A. 20px
B. 10px
C. 30px
D. 40px

Solution

  1. Step 1: Understand padding shorthand order

    Padding shorthand with four values sets padding in order: top, right, bottom, left.

  2. Step 2: Identify right padding value

    The second value (20px) is the right padding.

  3. Final Answer:

    20px -> Option A

  4. Quick Check:

    Padding order: top, right, bottom, left [OK]
Hint: Remember padding order: TRBL (top, right, bottom, left) [OK]
Common Mistakes:
  • Mixing up left and right values
  • Assuming all sides get the first value
  • Confusing padding order with margin order
4. What is wrong with this CSS code?
p { padding: 10px 20; }
medium
A. Padding values must be in percentages only.
B. Padding cannot have two values.
C. Missing units for the second padding value.
D. Padding property is misspelled.

Solution

  1. Step 1: Check padding value units

    All padding values must include units like px, em, %, etc. Here, 20 lacks units.

  2. Step 2: Confirm padding accepts two values

    Padding can have two values: first for top/bottom, second for left/right, but both must have units.

  3. Final Answer:

    Missing units for the second padding value. -> Option C

  4. Quick Check:

    All padding values need units [OK]
Hint: Every padding value needs units like px or em [OK]
Common Mistakes:
  • Forgetting units on some values
  • Thinking padding only accepts one value
  • Assuming default units if omitted
5. You want to add padding only to the left and right sides of a section element, leaving top and bottom padding at 0. Which CSS rule achieves this correctly?
hard
A. section { padding: 15px 0; }
B. section { padding: 0 15px; }
C. section { padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 0; }
D. section { padding: 15px 15px 0 0; }

Solution

  1. Step 1: Understand two-value padding shorthand

    When two values are given, the first is top/bottom, the second is left/right.

  2. Step 2: Check which option sets top/bottom to 0 and left/right to 15px

    section { padding: 0 15px; } sets top/bottom padding to 0 and left/right padding to 15px correctly.

  3. Step 3: Verify other options

    section { padding: 15px 0; } reverses values (top/bottom 15px, left/right 0px). section { padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 0; } sets top padding to 15px incorrectly. section { padding: 15px 15px 0 0; } sets top/right 15px, bottom/left 0px.

  4. Final Answer:

    section { padding: 0 15px; } -> Option B

  5. Quick Check:

    Two-value padding: top/bottom, left/right [OK]
Hint: Two values: first = top/bottom, second = left/right [OK]
Common Mistakes:
  • Mixing order of padding values
  • Using verbose longhand unnecessarily
  • Setting wrong sides with incorrect shorthand