1.What is the purpose of box-sizing: border-box?
By default, CSS uses content-box. That means width/height applies only to the content, and padding + border are added on top, making the element bigger than expected.
box-sizing: border-box changes this behavior so that:
Width = content + padding + border
Example:
width: 200px;
padding: 20px;
border: 5px;
Without border-box → total width becomes 250px
With border-box → total width stays 200px
Why we use it in projects:
Layout becomes predictable
Easier responsive design
No unexpected overflow issues
This is why many projects set this globally:
* {
box-sizing: border-box;
}
2.How does grid-template-columns: 2fr 1fr work?
fr = fraction of available space.
grid-template-columns: 2fr 1fr means:
Create two columns
- First column takes 2 parts
- Second column takes 1 part
So the first column is twice as wide as the second.
Example layout:
| 2/3 width | 1/3 width |
It divides remaining space, not fixed pixels.
3.Difference between semantic tags (<main>, <footer>) vs <div>
non-semantic tags?
They describe the meaning of the content.
Examples:
<main> → main content
<header> → top section
<footer> → bottom section
<nav> → navigation
Benefits:
- Better SEO
- Better accessibility (screen readers)
- Cleaner, meaningful code
<div>
- Has no meaning
- Used only for styling or grouping
Think of it like:
- Semantic tags = labeled boxes
- Div = plain box
4.Why is vh used instead of px?
vh = viewport height
1vh = 1% of screen height
Example:
height: 100vh;
Means: element fills entire screen height
Why use vh?
- Responsive design
- Works on all screen sizes
- Avoids scroll gaps
px is fixed and does not adapt to screen size.
Use case:
.hero {
height: 100vh;
}
5.Difference between Padding and Margin
Padding
Space inside the element (inside border).
| border |
| padding |
| content |
It pushes content inward.
Margin
Space outside the element.
It creates distance between elements.
Simple memory trick:
- Padding = inner space
- Margin = outer space
6.Difference between Grid and Flexbox
Flexbox (1-Dimensional)
Used for layout in one direction
- Row OR Column
Best for:
- Navbar
- Buttons
- Centering items
- Small layouts
Grid (2-Dimensional)
Used for layout in rows AND columns
Best for:
- Page layout
- Dashboards
- Complex sections
Quick summary:
| Feature | Flexbox | Grid |
| --------- | ---------- | ------------ |
| Direction | 1D | 2D |
| Use case | Components | Page layouts |
7.What are self-closing tags?
Tags that don’t need a closing tag because they don’t wrap content.
Examples:
<img>
<input>
<br>
<hr>
<meta>
They insert something instead of containing text.
8.Purpose of the meta viewport tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tells the browser:
- Match the page width to the device screen
- Do not zoom out like desktop view
- Make the website mobile-friendly
Without this tag:
- Website appears zoomed out on phones
- Layout breaks on mobile
It is essential for responsive design.
Top comments (0)