Top 50 HTML & CSS Interview Questions & Answers 2025

Box Model: content (actual content), padding (space around content), border (around padding), margin (space outside border). box-sizing: content-box (default, width = content only) vs border-box (width includes padding + border). Use border-box for predictable sizing. Margins collapse vertically between adjacent elements.

Flexbox: one-dimensional layout (row OR column). Container properties: display:flex, flex-direction, justify-content (main axis), align-items (cross axis), flex-wrap. Item properties: flex-grow, flex-shrink, flex-basis, align-self. Use for: navigation bars, card layouts, centering, distributing space. Great for components; Grid better for page layouts.

Grid: two-dimensional layout (rows AND columns). Define grid: grid-template-columns/rows. Place items: grid-column, grid-row, grid-area. Features: gap, auto-fill/fit, minmax(), fr unit. Flexbox vs Grid: Flexbox for 1D component layouts, Grid for 2D page layouts. Can combine: Grid for overall layout, Flexbox within grid items.

Semantic HTML uses meaningful tags: header, nav, main, article, section, aside, footer. Benefits: accessibility (screen readers understand structure), SEO (search engines understand content), maintainability (clearer code). Avoid div soup; use semantic tags where appropriate. ARIA attributes supplement semantics when native elements insufficient.

Techniques: (1) Mobile-first media queries (@media min-width), (2) Fluid layouts (%, vw, vh, fr), (3) Flexible images (max-width: 100%), (4) CSS Grid/Flexbox for adaptive layouts, (5) clamp() for fluid typography, (6) Container queries (style based on parent). Test across devices. Use responsive images (srcset) for performance.