Web · Flexbox Intro
Quizz
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — What's Missing From This Layout?
A developer is trying to create a navigation menu where all buttons appear side by side, but the buttons are stacking vertically instead.
What's the most likely missing CSS property to make the buttons display horizontally?
Options
• ```display: inline;``` or ```display: inline-block;```
• ```display: block;```
• ```position: absolute;```
• ```float: left;```
Hint : Think about which display value allows elements to appear side by side in the natural document flow.
Exercise 2 — Complete the Card Layout
Complete the CSS to create a card with:
- 20px spacing between the content and the border
- 15px spacing between this card and other elements
- Card should be centered horizontally on the page
.card {
width: 300px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
____ ____;
____ ____;
}
Options: padding: margin: 20px 15px auto 0 auto 15px display:
Hint : Consider which property controls the space inside an element vs. outside it, and how to center an element horizontally using margins.
Exercise 3 — Match CSS Properties to Their Purpose
Match each CSS property with its correct description or purpose:
Items to match
• margin
• padding
• display: block
• display: inline
Definitions
• Creates space outside an element's border
• Creates space between an element's content and its border
• Makes an element take up the full width available and start on a new line
• Makes an element only take up as much width as necessary and flow within text
Exercise 4 — Interpreting Margin Shorthand
What does the following CSS rule do?
margin: 10px 20px 30px 40px;
Options
• Sets top margin to 10px, right margin to 20px, bottom margin to 30px, and left margin to 40px
• Sets left margin to 10px, top margin to 20px, right margin to 30px, and bottom margin to 40px
• Sets all margins to between 10px and 40px, randomly varying
• Sets margin to be at least 10px but not more than 40px on any side
Hint : Remember the order for margin and padding shorthand properties: top, right, bottom, left (clockwise from the top).
Exercise 5 — Which Property Can't Be Applied?
A developer is styling a
<span>
element with
display: inline;
. Which of the following properties will NOT work as expected?
Options
• ```height: 100px;```
• ```color: blue;```
• ```padding-left: 10px;```
• ```font-weight: bold;```
Hint : Consider which CSS properties have no effect on inline elements, particularly regarding box dimensions.
Exercise 6 — Fix the Layout Issue
You have two elements side by side. You want to set specific heights and widths on both of them, but they need to remain side by side. Complete the CSS to fix this layout issue:
.box {
background-color: lightblue;
border: 1px solid blue;
width: 150px;
height: 100px;
padding: 10px;
margin: 5px;
display: ____;
}
Options: inline-block block inline none flex
Hint : Think about which display value allows elements to be placed side by side while still respecting their width and height properties.
Exercise 7 — Default Display Values
Match each HTML element with its default display value:
Items to match
• <div>
• <span>
• <h1>
• <a>
Definitions
• display: block;
• display: inline;
• display: block;
• display: inline;
Exercise 8 — Horizontal Centering Issue
A developer is trying to center a div horizontally with this CSS, but it's not working. What's the issue?
.container {
margin: auto;
padding: 20px;
background-color: lightblue;
}
Options
• The element needs a specific width to be centered with margin: auto
• The correct property is text-align: center, not margin: auto
• The margin property should be margin: auto auto, not just auto
• Horizontal centering is not possible with CSS
Hint : Consider what's required for the margin: auto technique to work for horizontal centering.
Exercise 9 — Shorthand for Specific Spacing
Complete the CSS shorthand to create:
- 20px top padding
- 10px right and left padding
- 30px bottom padding
.element {
padding: ____ ____ ____;
}
Options: 20px 10px 30px 5px 15px 25px
Hint : Remember the order for the 3-value shorthand in CSS: top, right/left, bottom.
Exercise 10 — Hidden Element Behavior
What's the difference between these two CSS declarations?
/* Option 1 */
.hidden-1 {
display: none;
}
/* Option 2 */
.hidden-2 {
visibility: hidden;
}
Options
• display: none removes the element from the layout, visibility: hidden hides it but keeps its space
• They do exactly the same thing
• display: none hides the element but keeps its space, visibility: hidden removes it completely
• display: none makes the element transparent, visibility: hidden makes it completely invisible
Hint : Think about how each property affects both the visibility of the element and its impact on the page layout.
Exercise 11 — CSS Shorthand Patterns
Match each CSS shorthand with what it sets:
Items to match
• margin: 10px;
• margin: 10px 20px;
• margin: 10px 20px 30px;
• margin: 0 auto;
Definitions
• 10px margin on all sides
• 10px top/bottom, 20px left/right
• 10px top, 20px left/right, 30px bottom
• No vertical margin, horizontal centering
Exercise 12 — Margin Collapsing
What will be the vertical space between these two paragraphs?
p {
margin-top: 20px;
margin-bottom: 30px;
}
Options
• 30px
• 50px
• 20px
• 0px
Hint : Think about how vertical margins interact between adjacent elements (margin collapsing).
Exercise 13 — Hide an Element
Complete the CSS to hide an element completely and remove it from the layout flow:
.hidden {
____ ____;
}
Options: display: block none inline inline-block
Hint : Consider which display value completely removes an element from the page layout.
Exercise 14 — Understanding inline-block
What's the main advantage of using
display: inline-block
over
display: inline
?
Options
• It allows you to set width, height, margins and padding on the element
• It makes the element completely invisible
• It creates a line break after the element
• It changes the element's text color
Hint : Think about the limitations of inline elements and how inline-block addresses them.
Exercise 15 — CSS Results Matching
Match each CSS rule with its visual effect:
Items to match
• padding: 20px;
• margin: 0 auto;
• display: none;
• display: inline-block;
Definitions
• Content pushed away from border on all sides
• Element centered horizontally
• Element completely removed from layout
• Elements flow side by side with controllable dimensions
Exercise 16 — Negative Margins
What effect will this CSS have?
.box {
margin-left: -20px;
}
Options
• The element will move 20px to the left
• The element will move 20px to the right
• The element will disappear from the page
• Nothing will happen as negative margins are invalid
Hint : Think about how negative margins affect an element's position relative to its normal position.
Exercise 17 — Spacing a Card Layout
Complete the CSS to add proper spacing to this card. Add 20px of space inside the card (between content and border) and 15px of space outside the card (between this card and other elements):
.card {
width: 300px;
background-color: white;
border: 1px solid #ccc;
____ ____;
____ ____;
}
Options: padding: margin: 20px 15px 10px 5px
Hint : Think about which property creates space inside an element versus outside it.
Exercise 18 — Button Layout Problem
A developer has created these buttons for a Codémon game interface, but they aren't displaying correctly. What's the issue?
.game-button {
background-color: #4CAF50;
color: white;
padding: 15px 30px;
margin: 10px;
border-radius: 5px;
width: 200px;
height: 50px;
display: inline;
}
Options
• The width and height won't work with display: inline
• The margin is too large for buttons
• The padding should be smaller than the margin
• The border-radius is incompatible with inline elements
Hint : Consider which CSS properties are ignored on inline elements.
Exercise 19 — Setting Individual Side Spacing
Complete the CSS to create:
- Padding only on the left side (20px)
- Margin only on the bottom side (30px)
.sidebar-item {
____ ____;
____ ____;
}
Options: padding-left: padding-right: margin-bottom: margin-top: 20px 30px
Hint : Think about which specific properties target individual sides of an element.
Exercise 20 — Visual Effects of CSS Properties
Match each CSS property with its visual effect:
Items to match
• margin-right: 20px;
• padding-bottom: 15px;
• display: block;
• visibility: hidden;
Definitions
• Creates space to the right of an element
• Pushes content away from the bottom border
• Forces element to start on a new line
• Makes element invisible but keeps its space
Exercise 21 — Creating Space Between Elements
What's the best way to create equal spacing between multiple divs stacked vertically?
Options
• Add equal top or bottom margins to all divs
• Add padding to the parent container only
• Add display: block to each div
• Increase the height of each div
Hint : Think about which property creates space between elements rather than inside them.
Exercise 22 — Override Padding Values
Complete the CSS to override the padding for just the top side, we want 20px on it.
.box {
padding: 10px;
____ ____;
}
Options: padding-top: padding: margin-top: padding-override: 20px 10px 10px 10px
Hint : Think about which property can override just one side of the padding without affecting the others.
Exercise 23 — Preventing Margin Collapse
Which technique will NOT prevent margin collapse between two adjacent elements?
Options
• Adding more margin to both elements
• Adding a border to the parent element
• Adding padding to the parent element
• Using display: inline-block on the elements
Hint : Think about which techniques create separation between elements and prevent their margins from collapsing together.
Exercise 24 — Display Property Behaviors
Match each display value with its behavior regarding width and height:
Items to match
• display: block;
• display: inline;
• display: inline-block;
• display: none;
Definitions
• Respects width and height, takes full width by default
• Ignores width and height, only takes necessary space
• Respects width and height, only takes necessary width
• Width and height have no effect as element is not displayed
Exercise 25 — Parent-Child Display Issues
What happens when you put a block element inside an inline element?
Options
• It's not recommended and can cause unexpected layout issues
• The block element automatically becomes inline
• The inline element automatically becomes block
• Both elements become inline-block
Hint : Consider the HTML nesting rules and how block and inline elements should be properly nested.
Exercise 26 — Calculate the Total Width
What is the total width of this element including margins?
.box {
width: 300px;
padding-left: 15px;
padding-right: 25px;
border: 5px solid black;
margin-left: 20px;
margin-right: 30px;
}
Options
• 400px
• 350px
• 370px
• 300px
Hint : Remember to add up all components: content width + padding (both sides) + borders (both sides) + margins (both sides).
Exercise 27 — Centering with margin: auto
A developer tried to center an inline element with
margin: 0 auto;
but it's not working. Why?
Options
• The margin: auto technique only works on block elements with a set width
• The correct syntax is margin-left: auto; margin-right: auto;
• The margin property doesn't support the auto value
• The correct approach is text-align: center on the parent element
Hint : Consider the requirements for the margin: auto centering technique to work.
Exercise 28 — Common HTML Elements and Their Display
Match each HTML element with its default display type:
Items to match
• <p>, <h1>, <section>, <article>
• <span>, <a>, <em>, <strong>
• <img>, <button>, <input>
• <br>, <hr>
Definitions
• display: block;
• display: inline;
• display: inline-block;
• display: block; (self-closing)
Exercise 29 — Understanding Spacing Properties
Which property should you use to create space BETWEEN multiple elements?
Options
• margin
• padding
• border
• width
Hint : Think about which property creates space outside elements, between them and other content.
Exercise 30 — Adding Space Between List Items
Complete the CSS to add 10 pixels of space between each list item:
li {
____ ____;
background-color: #f0f0f0;
padding: 5px;
}
Options: margin-bottom: padding-bottom: 10px 5px margin: padding:
Hint : Think about which property would create space between elements that are stacked vertically.
Exercise 31 — Understanding display: none
What is true about an element with
display: none
?
Options
• It doesn't take up any space in the layout and isn't accessible to screen readers
• It's invisible but still takes up space in the layout
• It's only hidden on small screens
• It's transparent but still interactive
Hint : Consider how display: none affects both visual appearance and the document flow.
Exercise 32 — Margin vs Padding Use Cases
Match each scenario with the more appropriate spacing property:
Items to match
• Creating space between the text and border of a button
• Separating paragraphs from each other
• Centering a div horizontally
• Adding space between an image and its caption
Definitions
• padding
• margin
• margin
• margin
Exercise 33 — Which Property to Use?
You want to increase the space between a button's text and its border. Which property should you use?
Options
• padding
• margin
• border-spacing
• line-height
Hint : Think about which property creates space inside an element, between its content and border.
Exercise 34 — Advanced Margin Shorthand
Complete the CSS to create:
- 20px top margin
- 15px right margin
- 30px bottom margin
- 5px left margin
.complex-box {
margin: ____ ____ ____ ____;
}
Options: 20px 15px 30px 5px 10px 25px
Hint : Remember the order for the 4-value shorthand in CSS: top, right, bottom, left (clockwise from top).
Exercise 35 — Identifying Display Issues
A designer created a navigation menu with list items but they're displaying vertically instead of horizontally. What's the most likely issue?
Options
• The list items need display: inline or display: inline-block
• The list items need more padding
• The list items need display: block
• The list items need larger margins
Hint : Consider the default display value of list items and what display value would make them appear side by side.