Margin in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding margin collapsing

Consider two adjacent <div> elements stacked vertically. Both have margin-bottom: 20px; and margin-top: 30px; respectively. What is the total vertical space between them?

CSS

<style>
  .box1 { margin-bottom: 20px; background: lightblue; height: 50px; }
  .box2 { margin-top: 30px; background: lightgreen; height: 50px; }
</style>
<div class="box1"></div>
<div class="box2"></div>

A 20px

B 50px

C 30px

D 0px

💡 Hint

Margins between vertical block elements collapse to the larger margin, not the sum.

When two vertical margins meet, the larger margin value is used instead of adding them. Here, 30px is larger than 20px, so the space is 30px.

📝 Syntax

intermediate

Which CSS rule sets equal margin on all sides?

You want to set a margin of 1.5rem on all four sides of a <section>. Which CSS rule achieves this?

CSS

section {
  /* Your margin rule here */
}

A margin: 1.5rem;

B margin: 1.5rem 1.5rem 1.5rem;

C margin: 1.5rem 0 1.5rem 0;

D margin: 0 1.5rem;

💡 Hint

A single value for margin applies to all sides equally.

Using one value in margin sets all four sides to that value.

❓ rendering

advanced

Visual effect of negative margin

What visual effect does applying margin-top: -20px; to a <div> have?

CSS

<style>
  .container { background: #eee; padding: 2rem; }
  .box { background: coral; height: 100px; margin-top: -20px; }
</style>
<div class="container">
  <div class="box">Box with negative top margin</div>
</div>

A The box disappears from the page.

B The box moves 20px downward, increasing space below.

C The box's height shrinks by 20px.

D The box moves 20px upward, overlapping content above it.

💡 Hint

Negative margin pulls the element closer or over adjacent elements.

Negative margin-top shifts the element upward, possibly overlapping previous content.

❓ selector

advanced

Selecting elements with different margin values

You want to select all <p> elements that have a margin-left of exactly 2rem using CSS attribute selectors. Which selector is correct?

A p[style*='margin-left: 2rem']

B p[style='margin-left: 2rem']

C p[style^='margin-left: 2rem']

D p[style$='margin-left: 2rem']

💡 Hint

Use substring matching to find styles containing the margin-left property.

The *= attribute selector matches any element whose attribute contains the given substring. This works for inline styles containing margin-left: 2rem.

❓ accessibility

expert

Margin and keyboard focus visibility

Why is it important to avoid using large negative margins on focusable elements like buttons or links in terms of accessibility?

A Negative margins automatically add ARIA labels to elements.

B Negative margins can move the focus outline off-screen, making keyboard focus invisible.

C Negative margins increase clickable area, improving accessibility.

D Negative margins improve screen reader announcements by hiding elements.

💡 Hint

Think about how keyboard users see which element is focused.

Large negative margins can shift the focus outline outside the visible area, making it hard for keyboard users to know which element is focused. This harms accessibility.