• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Padding

← Previous Next →

🔹 What is CSS Padding?

CSS Padding is the space between the content of an element and its border.
It pushes the content inward, creating spacing inside the element.

🔸 Syntax
element {
  padding: 20px;
}

✅ Adds 20px padding to all four sides.

🔸 Individual Sides

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

🔸 Shorthand Padding Property

padding: 10px 15px 20px 25px;

This means:

  • Top → 10px

  • Right → 15px

  • Bottom → 20px

  • Left → 25px

🔸 Shorter Forms

padding: 10px 15px;
/* Top & Bottom = 10px, Left & Right = 15px */

padding: 10px 15px 20px;
/* Top = 10px, Right & Left = 15px, Bottom = 20px */

🔸 Effect on Total Size

By default, padding increases the total size of the element (unless box-sizing: border-box is used).

Practice Questions

Q1. Apply 25px padding on all sides of a <div>.

Q2. Set only the top padding of a paragraph to 10px.

Q3. Add 15px left padding to an image element.

Q4. Use shorthand to set: Top = 5px, Right = 10px, Bottom = 15px, Left = 20px.

Q5. Apply 10px padding to the top and bottom, and 5px to left and right.

Q6. Write a class .card with 20px padding all around.

Q7. Add a 10px bottom padding to all <h2> elements.

Q8. Use internal CSS to add 15px right padding to all <li> items.

Q9. Write a rule that applies different padding for each side on a container.

Q10. Prevent padding from increasing element size using box-sizing.

CSS Padding Quiz

Q1: What does padding control in CSS?

A. Space outside the element
B. Text size
C. Space inside the element between content and border
D. Border thickness

Q2: Which property adds space inside the border of an element?

A. margin
B. padding
C. spacing
D. content

Q3: What does padding: 20px; apply?

A. 20px to left and right only
B. 20px to top and bottom only
C. 20px to all four sides
D. Only to the top side

Q4: Which property adds space to the left of content?

A. margin-left
B. padding-left
C. space-left
D. content-left

Q5: Which value is valid for padding?

A. padding: 10;
B. padding: 10pt 20pt;
C. padding: 10px 20px;
D. padding = 10px;

Q6: Which property affects total element size by default?

A. margin
B. border
C. padding
D. float

Q7: How can you include padding in an element’s width?

A. width: full;
B. box-sizing: content-box;
C. box-sizing: border-box;
D. padding-mode: fixed;

Q8: Which of the following applies 10px top & bottom, 5px left & right?

A. padding: 10px, 5px;
B. padding: 10px 5px;
C. padding: 5px 10px;
D. padding: top 10px, left 5px;

Q9: What is the default padding for HTML elements?

A. 10px
B. browser-dependent
C. 0
D. auto

Q10: Which of these prevents padding from increasing element dimensions?

A. border-collapse: collapse;
B. width: fit-content;
C. box-sizing: border-box;
D. padding: auto;
← Previous Next →
Login
Go Back Top