*1. What is the CSS Box Model, and how does box-sizing affect it?
*
Every element on a page is basically a rectangular box made up of four parts: content, padding, border, and margin. By default, browsers use box-sizing: content-box, which means if you set width: 200px, that's just the content area — any padding or border you add gets tacked on top, making the element bigger than you intended. This trips people up constantly. Switching to box-sizing: border-box fixes that headache by folding padding and border into your specified width/height, so the element stays the size you actually set. It makes responsive layouts way more predictable, which is why a lot of developers just apply it globally at the start of a project.
*2. What's the difference between display: block, inline, and inline-block?
*
It comes down to how the element sits in the page flow and which sizing properties actually work on it.
block — Takes up its own line and stretches to fill the available width. You can set width, height, and margins/padding on all sides and they'll behave as expected. Think
or.
inline — Just flows along with the text, no line breaks. Width and height are ignored, and vertical margin/padding won't push other elements away — only left/right spacing really works. Think or .
inline-block — The best of both: it sits inline next to other elements, but you can still give it a width, height, and full padding/margin like a block element. Buttons and form inputs behave this way.
3. What are semantic HTML elements, and why do they matter?
Semantic elements are tags that actually describe what they contain — things like
, , , , and — instead of just wrapping everything in generic s and s that say nothing about their purpose.This matters for a couple of practical reasons. Screen readers rely on these landmarks to let visually impaired users jump straight to the content they care about, rather than tabbing through endless nested divs. And search engines can better understand which part of the page is the actual content versus just navigation or boilerplate, which can genuinely help with SEO.
