CSS Padding Practice Questions with Solutions

By /

Introduction

CSS padding creates space inside an HTML element, between the content and its border. It makes buttons, cards, forms, and containers look cleaner and easier to read. You can apply padding to all sides or control each side individually. In this chapter, you’ll practice CSS padding properties through simple solved questions that are perfect for beginners. CSS Padding Practice questions with solutions help to build concepts.

Question 1: Add Padding on All Four Sides

Problem Statement

Write CSS to add 20px padding on all four sides of a <div> element.

CSS Code

div {
    padding: 20px;
}

Output

The content inside the <div> has 20px space on all four sides.

Explanation

  • padding creates space inside an element.
  • 20px applies equal padding to the top, right, bottom, and left.
  • It makes the content easier to read.

Question 2: Add Padding Only to the Top

Problem Statement

Write CSS to add 30px padding to the top of a <section> element.

CSS Code

section {
    padding-top: 30px;
}

Output

The content inside the <section> moves 30px downward, creating extra space at the top.

Explanation

  • padding-top adds space only to the top inside the element.
  • The other three sides remain unchanged.
  • It helps create better spacing above the content.

Question 3: Add Padding Only to the Bottom

Problem Statement

Write CSS to add 25px padding to the bottom of a paragraph.

CSS Code

p {
    padding-bottom: 25px;
}

Output

Extra space is added below the paragraph text inside the paragraph.

Explanation

  • padding-bottom creates space below the content.
  • Only the bottom padding changes.
  • This improves the appearance of text containers.

Question 4: Apply Different Padding on Each Side

Problem Statement

Write CSS to apply the following padding to a <div>:

  • Top: 10px
  • Right: 20px
  • Bottom: 30px
  • Left: 40px

CSS Code

div {
    padding: 10px 20px 30px 40px;
}

Output

The <div> displays different amounts of inner spacing on each side.

Explanation

The four values represent:

  • 10px → Top
  • 20px → Right
  • 30px → Bottom
  • 40px → Left

This order always follows Top → Right → Bottom → Left (TRBL).

Question 5: Add Padding Inside a Button

Problem Statement

Write CSS to add 12px padding inside a button.

CSS Code

button {
    padding: 12px;
}

Output

The button becomes larger and easier to click because of the added inner spacing.

Explanation

  • padding increases the space between the button text and its border.
  • Larger buttons improve user experience.
  • Padding is commonly used when styling buttons.

Question 6: Add Padding Only to the Left

Problem Statement

Write CSS to add 40px padding to the left side of a <div> element.

CSS Code

div {
    padding-left: 40px;
}

Output

The content inside the <div> moves 40px away from the left border.

Explanation

  • padding-left adds space between the content and the left border.
  • Only the left padding changes.
  • The top, right, and bottom padding remain unchanged.

Question 7: Add Padding Only to the Right

Problem Statement

Write CSS to add 30px padding to the right side of a paragraph.

CSS Code

p {
    padding-right: 30px;
}

Output

Extra space appears between the paragraph text and the right border.

Explanation

  • padding-right creates space inside the element on the right side.
  • It improves text readability.
  • Only the right padding is affected.

Question 8: Use Two Values with the Padding Property

Problem Statement

Write CSS to apply 20px padding to the top and bottom, and 40px padding to the left and right of a <div>.

CSS Code

div {
    padding: 20px 40px;
}

Output

The <div> displays:

  • 20px padding on the top and bottom
  • 40px padding on the left and right

Explanation

When two values are used:

  • First value → Top and Bottom
  • Second value → Left and Right

This shorthand makes the CSS shorter and easier to read.

Question 9: Use Three Values with the Padding Property

Problem Statement

Write CSS to apply:

  • Top: 10px
  • Left and Right: 20px
  • Bottom: 30px

CSS Code

div {
    padding: 10px 20px 30px;
}

Output

The <div> displays:

  • 10px padding at the top
  • 20px padding on the left and right
  • 30px padding at the bottom

Explanation

When three values are used:

  • First value → Top
  • Second value → Left and Right
  • Third value → Bottom

This shorthand is useful when the left and right padding are the same.

Question 10: Compare an Element with No Padding and One with Padding

Problem Statement

Write CSS to compare a <div> with no padding and another <div> with 20px padding.

CSS Code

.box-one {
    padding: 0;
}

.box-two {
    padding: 20px;
}

Output

  • .box-one has content placed close to its border.
  • .box-two has 20px space between the content and the border, making it look cleaner.

Explanation

  • padding: 0; removes all inner spacing.
  • padding: 20px; adds equal spacing on all four sides.
  • Padding improves readability and makes elements more visually appealing.

Key Takeaways

  • Padding creates space inside an element.
  • The padding shorthand can use one, two, three, or four values.
  • Individual padding can be controlled using padding-top, padding-right, padding-bottom, and padding-left.
  • Padding increases the clickable area of buttons.
  • Padding improves readability by adding space between content and borders.
  • Unlike margin, padding is inside the border.
  • Proper padding creates cleaner and more professional webpage layouts.

Frequently Asked Questions (FAQs)

1. What is CSS padding?

CSS padding is the space between an element’s content and its border. It creates inner spacing and improves the appearance of HTML elements.

2. What is the difference between padding and margin?

Padding creates space inside an element, while margin creates space outside an element.

3. Can I apply padding to only one side?

Yes. You can use padding-top, padding-right, padding-bottom, or padding-left to apply padding to a specific side.

4. What is the order of four padding values?

When using four values, the order is:

  • Top
  • Right
  • Bottom
  • Left

This follows the TRBL (Top, Right, Bottom, Left) rule.

5. Can I use percentage values for padding?

Yes. Padding can be specified using percentages, allowing the spacing to adjust based on the size of the parent element.

6. Does padding increase the size of an element?

Yes. By default, padding adds to the total width and height of an element unless box-sizing: border-box; is used.

7. Why is padding important in web design?

Padding improves readability, creates better spacing, increases the clickable area of buttons, and gives web pages a clean and professional appearance.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top