✅ Web development Interview Questions with Answers Part-2

11. What is the CSS box model and how does it work?

Answer
Every HTML element is a box.
It has content, padding, border, and margin.
The final size of an element is the sum of all four.
In real projects, I use box-sizing: border-box to keep layouts predictable.

12. What is the difference between margin and padding?

Answer
Margin controls space outside an element.
Padding controls space inside an element.
Margins separate elements.
Padding increases clickable and visual area.
Margins can collapse. Padding never collapses.

13. Explain the different CSS position values and their use cases.

Answer
Static is the default.
Relative moves an element relative to itself and helps position children.
Absolute positions an element relative to the nearest positioned parent.
Fixed sticks to the viewport during scroll.
Sticky behaves like relative until a scroll threshold, then becomes fixed.

14. What is the difference between display none, inline, block, and inline-block?

Answer
Display none removes the element from layout.
Block takes full width and starts on a new line.
Inline stays in the same line but ignores width and height.
Inline-block stays inline and respects width and height.
Inline-block is common for buttons.

15. What is the difference between Flexbox and CSS Grid?

Answer
Flexbox handles layout in one direction, row or column.
Grid handles layout in both rows and columns.
I use Flexbox for components and alignment.
I use Grid for page-level layouts.

16. How do you center a div vertically and horizontally?

Answer
I use Flexbox.
Set the parent to display flex.
Use justify-content center and align-items center.
It is clean, readable, and reliable across browsers.

17. How does CSS specificity work?

Answer
Specificity decides which CSS rule applies.
Inline styles override IDs.
IDs override classes.
Classes override elements.
If specificity matches, the last rule wins.
I avoid IDs in CSS to keep specificity low.

18. What is z-index and how does stacking context work?

Answer
z-index controls which element appears on top.
It only works on positioned elements.
A stacking context limits child z-index values.
Many modal bugs happen because of unexpected stacking contexts.

19. What are media queries and how do you build responsive layouts?

Answer
Media queries apply styles based on screen size.
I follow a mobile-first approach.
I start with small screens and scale up using min-width queries.
This improves performance and maintainability.

20. What are CSS preprocessors and why are they used?

Answer
Preprocessors extend CSS with variables, nesting, and mixins.
Sass is the most common.
They reduce repetition and improve structure.
Today, I use them selectively since modern CSS supports many features natively.

Double Tap ♥️ For Part-3