Lancecourse
Les Cours
Les Tutos
Blog
Se Connecter
S'inscrire
gratis
English
CSS Box Model and Layout
This quiz tests your understanding of the CSS Box Model, display properties, and positioning concepts, reinforcing key elements of web page layout and design.
Question 1
How would you position an element relative to its normal position in the document flow?
position: static;
position: fixed;
position: absolute;
position: relative;
Question 2
What does the display: inline-block; property do?
Makes the element a block element with full-width
Allows elements to sit side by side but behave like block elements
Forces the element to occupy the full width of the container
Hides the element
Question 3
Which display value allows for two-dimensional layouts using rows and columns?
Flex
Block
Grid
Inline-block
Question 4
What does position: absolute; do to an element?
Keeps the element in its original flow position
Positions the element relative to its parent container
Makes the element scroll with the page
Positions the element relative to the window
Question 5
What is the default position property for HTML elements?
Relative
Absolute
Fixed
Static
Question 6
Which of the following is an example of a block-level element?
<span>
<img>
<div>
<a>
Question 7
Which part of the CSS Box Model defines the space between an element’s border and other elements on the page?
Padding
Content
Margin
Border
Question 8
Which of the following is NOT part of the CSS Box Model?
Padding
Border
Content
Z-index
Question 9
If you want an element to stick to the top of the viewport when scrolled, which position property would you use?
position: relative;
position: static;
position: absolute;
position: sticky;
Question 10
Which of the following properties would you use to create space inside the border of an element but outside the content?
Border
Margin
Padding
Width
Answer all the questions then submit.
Submit Answers