diff --git a/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.mdx b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.mdx index 07c30c6b3..71d647a60 100644 --- a/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.mdx +++ b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.mdx @@ -15,4 +15,4 @@ A BFC is an HTML box that satisfies at least one of the following conditions: 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). -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). +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). diff --git a/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 b/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 index 083712145..6b96be4ad 100644 --- a/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 +++ b/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 @@ -28,7 +28,39 @@ Note that `margin`s are not counted towards the actual size of the box. It affec Look up the `box-sizing` property, which affects how the total heights and widths of elements are calculated. - `box-sizing: content-box`: This is the default value of `box-sizing` and adheres to the rules above. -- `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. + + For example: + + ```css + .example { + box-sizing: content-box; + width: 100px; + padding: 10px; + border: 5px solid black; + } + ``` + + 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). + +- `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. + + For example: + + ```css + .example { + box-sizing: border-box; + width: 100px; + padding: 10px; + border: 5px solid black; + } + ``` + + 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). + +### Border and Margin Behavior + +- **Borders do not collapse or overlap** with those of adjacent elements. Each element’s border is rendered individually. +- **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. ## References diff --git a/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.mdx b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.mdx index fa4d47e34..4b71e4dc2 100644 --- a/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.mdx +++ b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.mdx @@ -4,6 +4,6 @@ title: Have you played around with the new CSS Flexbox or Grid specs? Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts. -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. +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. -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. +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. diff --git a/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.mdx b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.mdx index 77780ea24..6fa3b0ae5 100644 --- a/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.mdx +++ b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.mdx @@ -21,4 +21,4 @@ For a complete list of values for the `display` property, refer to [CSS Display ## References -- [CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display) +- [CSS Display | MDN](https://developer.mozilla.org/docs/Web/CSS/display)