Box Model & Layout interview questions

21 real Box Model & Layout questions from the CSS bank, as asked in Indian campus drives and tech interviews. Every question has a verified answer and an AI-tutor explanation on placd — free to start.

1. What is box-sizing border-box?

Junior
  1. A.a value making an element's declared width and height include its padding and border
  2. B.the space between an element's content and its border
  3. C.spacing declared between flex or grid items without adding it to the outer edges
  4. D.an isolated layout region whose floats and margins do not affect the outside, triggered by overflow other than visible
Reveal the answer + AI explanation — free account

3. Which statement is correct?

Junior
  1. A.box-sizing border-box — spacing declared between flex or grid items without adding it to the outer edges
  2. B.box-sizing border-box — the default value where declared width and height apply only to the content area, excluding padding and border
  3. C.box-sizing border-box — the behavior where adjacent vertical spacing of block elements combines into a single gap equal to the larger of the two
  4. D.box-sizing border-box — a value making an element's declared width and height include its padding and border
Reveal the answer + AI explanation — free account

4. What is box-sizing content-box?

Junior
  1. A.a value making an element's declared width and height include its padding and border
  2. B.the behavior where adjacent vertical spacing of block elements combines into a single gap equal to the larger of the two
  3. C.the default value where declared width and height apply only to the content area, excluding padding and border
  4. D.the space between an element's content and its border
Reveal the answer + AI explanation — free account

5. Which term means: "the default value where declared width and height apply only to the content area, excluding padding and border"?

Junior
  1. A.gap property
  2. B.inline-block
  3. C.box-sizing content-box
  4. D.block formatting context
Reveal the answer + AI explanation — free account

6. Which statement is correct?

Junior
  1. A.box-sizing content-box — a display value that flows inline like text but accepts width, height, and vertical margins
  2. B.box-sizing content-box — the default value where declared width and height apply only to the content area, excluding padding and border
  3. C.box-sizing content-box — an isolated layout region whose floats and margins do not affect the outside, triggered by overflow other than visible
  4. D.box-sizing content-box — spacing declared between flex or grid items without adding it to the outer edges
Reveal the answer + AI explanation — free account

7. What is margin collapsing?

Junior
  1. A.a value making an element's declared width and height include its padding and border
  2. B.a display value that flows inline like text but accepts width, height, and vertical margins
  3. C.the behavior where adjacent vertical spacing of block elements combines into a single gap equal to the larger of the two
  4. D.the default value where declared width and height apply only to the content area, excluding padding and border
Reveal the answer + AI explanation — free account

8. Which term means: "the behavior where adjacent vertical spacing of block elements combines into a single gap equal to the larger of the two"?

Junior
  1. A.margin collapsing
  2. B.inline-block
  3. C.padding
  4. D.block formatting context
Reveal the answer + AI explanation — free account

9. Which statement is correct?

Junior
  1. A.margin collapsing — the default value where declared width and height apply only to the content area, excluding padding and border
  2. B.margin collapsing — the space between an element's content and its border
  3. C.margin collapsing — the behavior where adjacent vertical spacing of block elements combines into a single gap equal to the larger of the two
  4. D.margin collapsing — spacing declared between flex or grid items without adding it to the outer edges
Reveal the answer + AI explanation — free account

10. What is block formatting context?

Mid
  1. A.the space between an element's content and its border
  2. B.a value making an element's declared width and height include its padding and border
  3. C.the default value where declared width and height apply only to the content area, excluding padding and border
  4. D.an isolated layout region whose floats and margins do not affect the outside, triggered by overflow other than visible
Reveal the answer + AI explanation — free account

11. Which term means: "an isolated layout region whose floats and margins do not affect the outside, triggered by overflow other than visible"?

Mid
  1. A.margin collapsing
  2. B.block formatting context
  3. C.box-sizing border-box
  4. D.padding
Reveal the answer + AI explanation — free account

12. Which statement is correct?

Mid
  1. A.block formatting context — spacing declared between flex or grid items without adding it to the outer edges
  2. B.block formatting context — an isolated layout region whose floats and margins do not affect the outside, triggered by overflow other than visible
  3. C.block formatting context — a display value that flows inline like text but accepts width, height, and vertical margins
  4. D.block formatting context — the space between an element's content and its border
Reveal the answer + AI explanation — free account

13. What is inline-block?

Mid
  1. A.the space between an element's content and its border
  2. B.a value making an element's declared width and height include its padding and border
  3. C.spacing declared between flex or grid items without adding it to the outer edges
  4. D.a display value that flows inline like text but accepts width, height, and vertical margins
Reveal the answer + AI explanation — free account

15. Which statement is correct?

Mid
  1. A.inline-block — the default value where declared width and height apply only to the content area, excluding padding and border
  2. B.inline-block — a display value that flows inline like text but accepts width, height, and vertical margins
  3. C.inline-block — an isolated layout region whose floats and margins do not affect the outside, triggered by overflow other than visible
  4. D.inline-block — the behavior where adjacent vertical spacing of block elements combines into a single gap equal to the larger of the two
Reveal the answer + AI explanation — free account

16. What is padding?

Junior
  1. A.a value making an element's declared width and height include its padding and border
  2. B.the space between an element's content and its border
  3. C.spacing declared between flex or grid items without adding it to the outer edges
  4. D.the default value where declared width and height apply only to the content area, excluding padding and border
Reveal the answer + AI explanation — free account

18. Which statement is correct?

Junior
  1. A.padding — an isolated layout region whose floats and margins do not affect the outside, triggered by overflow other than visible
  2. B.padding — the behavior where adjacent vertical spacing of block elements combines into a single gap equal to the larger of the two
  3. C.padding — a value making an element's declared width and height include its padding and border
  4. D.padding — the space between an element's content and its border
Reveal the answer + AI explanation — free account

19. What is gap property?

Mid
  1. A.a display value that flows inline like text but accepts width, height, and vertical margins
  2. B.the default value where declared width and height apply only to the content area, excluding padding and border
  3. C.the space between an element's content and its border
  4. D.spacing declared between flex or grid items without adding it to the outer edges
Reveal the answer + AI explanation — free account

21. Which statement is correct?

Mid
  1. A.gap property — the behavior where adjacent vertical spacing of block elements combines into a single gap equal to the larger of the two
  2. B.gap property — the space between an element's content and its border
  3. C.gap property — a value making an element's declared width and height include its padding and border
  4. D.gap property — spacing declared between flex or grid items without adding it to the outer edges
Reveal the answer + AI explanation — free account

Free to start

Answers, AI explanations, and a scored voice mock interview

Sign up free to check your answers with explanations, ask the AI tutor anything on any question, and take one full AI mock interview — scored like a real panel.

Practice Box Model & Layout free