CSS Interview Questions 16-20 (Web Components, Margin vs Padding, Debugging Scenarios)

Welcome to the final and arguably most important section of the CSS module: Troubleshooting and Architecture.

Any developer can memorize properties. But when the production site looks broken on an iPhone, or when styles mysteriously stop working, that is when a Senior Developer steps in. In this lesson, we cover modern component architecture (Shadow DOM) and then dive straight into three practical debugging scenarios that simulate real-world fire drills.

16. What are shadow DOM and web components?

As web applications grew huge, a big problem emerged: CSS Leaking. You write a style for .button, and suddenly every button on the site breaks because someone else used that class name.

Web Components are a suite of technologies allowing you to create reusable custom elements (like <user-card>). The Shadow DOM is the mechanism that encapsulates these components.

Analogy: The Soundproof Room
The main DOM is a noisy open-plan office. Styles (noise) travel everywhere. The Shadow DOM is a soundproof glass meeting room inside that office. What happens inside (styles defined there) stays inside. What happens outside does not get in.

<style>
  p { color: red; } /* This targets ALL 'p' tags in the main DOM */
</style>
<p>I am red</p>

<div id="host"></div>

<script>
  const host = document.getElementById('host');
  // Create the shadow root
  const shadow = host.attachShadow({mode: 'open'});
  
  // Add content and style inside the shadow root
  shadow.innerHTML = `
    <style>
      p { color: blue; } /* Only affects 'p' inside this shadow root */
    </style>
    <p>I am blue, despite the global red rule!</p>
  `;
</script>

17. What is the difference between margin and padding in CSS?

This might seem basic, but interviewers often ask it to see if you understand the Box Model mechanics regarding background colors and click areas.

.button {
  background-color: green;
  border: 2px solid black;
  
  /* Increases the green area. Makes the button look bigger. */
  padding: 20px; 
  
  /* Pushes neighbor elements away. Remains transparent. */
  margin: 50px; 
}

18. Scenario: Debug CSS not applying in a webpage.

Your manager calls you: "I updated the styles, but nothing changed on the live site." How do you systematically debug this?

19. Scenario: Page looks different in Chrome and Firefox — debugging steps.

This is a classic "Cross-Browser Compatibility" issue. Every browser has its own default "User Agent Stylesheet." For example, Chrome might give <h1> a 20px margin, while Firefox gives it 22px.

The Solution: CSS Reset / Normalize
You must strip away these browser defaults so you start on a blank canvas.

/* A simple CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Or include 'normalize.css' in your project which fixes 
   common browser inconsistencies without removing useful defaults. */

Other common culprits:
- Scrollbars: Windows browsers reserve space for scrollbars; Mac browsers often float them. This can shift layouts by ~17px.
- Vendor Prefixes: Some new CSS features (like complex gradients or flexbox in older versions) need -webkit- or -moz- prefixes.

20. Scenario: Fix layout breaking on mobile screens.

You open your beautiful desktop site on a phone, and there is a horizontal scrollbar, text is cut off, and elements are overflowing. What is the checklist to fix this?

/* BAD: Will force horizontal scroll on mobile */
.container {
  width: 1000px; 
}

/* GOOD: Adapts to any screen size */
.container {
  width: 100%;
  max-width: 1000px; /* Caps size only on large screens */
  padding: 0 15px;   /* Prevents text touching edges on mobile */
}