Skip to content

Commit 397e081

Browse files
tahachmtahachm
authored
qns/quiz: address user feedback (#488)
1 parent f74c37e commit 397e081

File tree

4 files changed

+37
-5
lines changed
  • packages/quiz/questions
    • describe-block-formatting-context-bfc-and-how-it-works
    • explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models
    • have-you-played-around-with-the-new-css-flexbox-or-grid-specs
    • what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use

4 files changed

+37
-5
lines changed

‎packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@ A BFC is an HTML box that satisfies at least one of the following conditions:
1515

1616
In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).
1717

18-
Vertical margins between adjacent block-level boxes in a BFC collapse. Read more on [collapsing margins](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).
18+
Vertical margins between adjacent block-level boxes within the same BFC can collapse, but a BFC prevents margin collapsing with elements outside of it. Read more on [collapsing margins](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).

‎packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.mdx

+33-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,39 @@ Note that `margin`s are not counted towards the actual size of the box. It affec
2828
Look up the `box-sizing` property, which affects how the total heights and widths of elements are calculated.
2929

3030
- `box-sizing: content-box`: This is the default value of `box-sizing` and adheres to the rules above.
31-
- `box-sizing: border-box`: The `width` and `height` will include the content, padding and border, but not including the margin. This is a much more intuitive way to think about boxes and hence many CSS frameworks (e.g. Bootstrap, Tailwind, Bulma) set `* { box-sizing: border-box; }` globally, so that all elements use such a box model by default. See the [question on `box-sizing: border-box`](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages) for more information.
31+
32+
For example:
33+
34+
```css
35+
.example {
36+
box-sizing: content-box;
37+
width: 100px;
38+
padding: 10px;
39+
border: 5px solid black;
40+
}
41+
```
42+
43+
The actual space taken by the `.example` element will be 130px wide (100px width + 10px left padding + 10px right padding + 5px left border + 5px right border).
44+
45+
- `box-sizing: border-box`: The `width` and `height` will include the content, padding and border (but not the margin). This is a much more intuitive way to think about boxes and hence many CSS frameworks (e.g. Bootstrap, Tailwind, Bulma) set `* { box-sizing: border-box; }` globally, so that all elements use such a box model by default. See the [question on `box-sizing: border-box`](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages) for more information.
46+
47+
For example:
48+
49+
```css
50+
.example {
51+
box-sizing: border-box;
52+
width: 100px;
53+
padding: 10px;
54+
border: 5px solid black;
55+
}
56+
```
57+
58+
The element will still take up 100px on the page, but the content area will be 70px wide (100px - 10px left padding - 10px right padding - 5px left border - 5px right border).
59+
60+
### Border and Margin Behavior
61+
62+
- **Borders do not collapse or overlap** with those of adjacent elements. Each element’s border is rendered individually.
63+
- **Margins can collapse**, but only vertically and only between block-level elements. Horizontal margins do not collapse. This means that if one block element has a bottom margin and the next has a top margin, only the larger of the two will be used. This behavior is independent of `box-sizing` and is the default in CSS.
3264

3365
## References
3466

‎packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ title: Have you played around with the new CSS Flexbox or Grid specs?
44

55
Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.
66

7-
Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. famous CSS frameworks like Bootstrap and Bulma are based on Flexbox, and Flexbox is still the tested and proven way to create layouts.
7+
Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. famous CSS frameworks like Bootstrap and Bulma are based on Flexbox, and Flexbox is still the tested and proven way to create a variety of layouts.
88

9-
Grid is by far the most intuitive approach for creating grid-based layouts but browser support is not that wide at the moment. Many layout problems can already be solved with Flexbox, so there's not a huge need for Grid.
9+
Grid is meant for two-dimensional layouts, giving you full control over both rows and columns. It offers an intuitive and powerful way to create complex grid-based designs directly in CSS, often with less code and more flexibility than older techniques. Browser support for Grid is now strong across all major modern browsers, making it a solid option for layout design in most projects.

‎packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,4 @@ For a complete list of values for the `display` property, refer to [CSS Display
2121

2222
## References
2323

24-
- [CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
24+
- [CSS Display | MDN](https://developer.mozilla.org/docs/Web/CSS/display)

0 commit comments

Comments
 (0)