HTML and CSS interview questions

The box model is how the browser sizes an element: content, then padding, then border, then margin outside.

With content-box, padding and border sit on top of width so a 200px card can overflow its parent.

Padding is space inside the border, so the background still covers it.

Flexbox lays out children in a row or column and lets you align, wrap, and distribute leftover space.

Grid is for two-dimensional layouts where rows and columns must line up, like a dashboard or photo gallery.

The browser scores inline styles, then IDs, then classes and attributes, then elements.

Relative keeps the element in normal flow and lets you nudge it with top or left.

Z-index only applies to positioned elements, or those with certain properties that create a stacking context.

Semantic tags like header, nav, main, and button describe meaning, not just boxes.

I wrap the input in a label or set the label for attribute to the input id.

Alt describes the image for screen readers and when the file fails to load.

Block elements like p and div start on a new line and take full available width.

It tells the phone not to pretend the screen is a wide desktop and then zoom out.

ARIA attributes tell assistive tech the role, name, and state of custom widgets when native HTML is not enough.

Many users cannot use a mouse, including power users and people with motor disabilities.

Display none removes the element from layout so it takes no space.

They apply CSS only when the viewport or device matches a condition, usually min-width.

GET puts fields in the URL and is for safe reads like search.

Divs have no meaning, so screen readers and outline tools cannot find nav, headings, or lists.

Em is relative to the parent font-size, so it compounds in nested components.