Top 5 CSS Interview Questions (with Answers)

#frontend #react #css

1️⃣ What is the CSS Box Model and why is it important?

Answer:
The CSS Box Model represents how elements are structured and spaced on a page. Every element is a box made up of content, padding, border, and margin. Understanding the box model helps you manage layout, spacing, and design precisely.

2️⃣ What’s the difference between display: none; and visibility: hidden;?

Answer:

display: none; completely removes the element from the layout flow — no space is taken.
visibility: hidden; hides the element but preserves its space on the page.

3️⃣ What are CSS selectors and name 3 common ones?

Answer:
CSS selectors target HTML elements to apply styles.
Common selectors:

Element selector (p, h1)
Class selector (.container)
ID selector (#header)

4️⃣ How does Flexbox help with layout?

Answer:
Flexbox provides a powerful layout system to align and distribute space among items in a container. It simplifies horizontal & vertical alignment using properties like display: flex, justify-content, and align-items.

Example:

.container {
display: flex;
justify-content: center;
align-items: center;
}

5️⃣ What is the difference between margin and padding?

Answer: