CSS Box Model & Display

Q31 — Explain the CSS Box Model in detail.

Every HTML element is treated as a box, which has:

• Content → text, images inside the element.
• Padding → space between content & border.
• Border → boundary around padding.
• Margin → space outside the border (separates from neighbors).

div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

📏 Total width = 200 + (10×2) + (5×2) = 230px.

Q32 — Difference between box-sizing: content-box and border-box?

▶ content-box (default) → width/height include only content. Padding & border add extra space.
▶ border-box → width/height include content + padding + border.

div {
  width: 200px;
  box-sizing: border-box;
}

✔ Ensures consistent layouts.

Q33 — What are replaced elements in CSS?

Replaced elements are those whose content is not controlled by CSS but by external resources (browser decides rendering).
Examples: <img>, <video>, <input>.

Q35 — Difference between display: none and visibility: hidden?

➡ display: none → removes element from DOM flow (no space).
➡ visibility: hidden → hides element but still takes up space.

Q36 — Difference between relative length units (em, rem) and absolute (px)?

▶ em → relative to parent font size.
▶ rem → relative to root (html).
▶ px → fixed, absolute.

Q38 — Difference between float layout and modern layouts (Flexbox, Grid)?

➡ Float (old method): used for layouts but difficult (clearfix hacks).
➡ Flexbox/Grid (modern): flexible, responsive, no clearfix needed.

Q39 — Difference between inline vs inline-block vs block with example?

span { display: inline; }      /* cannot set width */
div { display: block; }        /* full width */
button { display: inline-block; } /* inline but can set width */

Q40 — Difference between min-width, max-width, and width?

➡ width: fixed size.
➡ min-width: smallest allowed size.
➡ max-width: largest allowed size.

⬅ Home