Padding in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the computed padding for this CSS?

Given the CSS below, what is the total padding applied to the element on the left and right sides combined?

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

CSS

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

A 60px

B 50px

C 30px

D 40px

💡 Hint

Remember the order of padding values: top, right, bottom, left.

The padding shorthand sets padding in the order: top, right, bottom, left. So right is 20px and left is 40px. Total left + right = 60px.

🧠 Conceptual

intermediate

Which padding property sets only the bottom padding?

You want to add space only below an element. Which CSS property should you use?

A padding-right

B padding-left

C padding-top

D padding-bottom

💡 Hint

Think about the side of the box you want to add space to.

The 'padding-bottom' property adds space only below the content inside the element.

❓ layout

advanced

What is the visible width of the box with this CSS?

Consider this CSS and HTML:

div { width: 200px; padding: 10px 15px; border: 5px solid black; box-sizing: content-box; }

What is the total visible width of the div in pixels?

CSS

div { width: 200px; padding: 10px 15px; border: 5px solid black; box-sizing: content-box; }

A 230px

B 240px

C 270px

D 250px

💡 Hint

Remember that with content-box, padding and border add to the width.

Width is 200px (content). Padding left+right = 15px + 15px = 30px. Border left+right = 5px + 5px = 10px. Total width = 200 + 30 + 10 = 240px.

❓ accessibility

advanced

Why is padding important for clickable buttons?

Which reason best explains why adding padding to buttons improves accessibility?

A Padding increases the clickable area, making it easier to tap or click.

B Padding hides the button from screen readers.

C Padding changes the button color for better contrast.

D Padding reduces the font size inside the button.

💡 Hint

Think about how users interact with buttons on different devices.

Padding adds space inside the button, making the clickable area larger and easier to activate, especially on touch devices.

❓ selector

expert

Which CSS selector applies padding only to paragraphs inside a section with class 'intro'?

You want to add 20px padding only to <p> elements inside <section class="intro">. Which selector is correct?

A p.intro section { padding: 20px; }

B section > .intro p { padding: 20px; }

C section.intro p { padding: 20px; }

D .intro > p { padding: 20px; }

💡 Hint

Think about the order: parent then child in selectors.

The selector 'section.intro p' targets all

inside any

with class 'intro'.