diff --git a/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md b/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md index 13dfc7ebf7a..7bba902f87b 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md @@ -13,7 +13,7 @@ This behavior occurs when the vertical margins of adjacent elements overlap, res Understanding margin collapsing is important for precise control over spacing and layout in web design. So, let's get into how margin collapsing works and explore some common scenarios where it occurs. -In CSS when two vertical margins come into contact with each other they'll collapse, this means that instead of adding together the larger margin wins and determines the space between the elements. This behavior applies only to vertical margins top and bottom and not horizontal margins, not the left and right. So, here's an example to illustrate this concept: +In CSS when two vertical margins come into contact with each other they'll collapse, this means that instead of adding together, the larger margin wins and determines the space between the elements. This behavior applies only to vertical margins (top and bottom) and not to horizontal margins (left and right). So, here's an example to illustrate this concept: :::interactive_editor @@ -37,7 +37,7 @@ In CSS when two vertical margins come into contact with each other they'll colla In this example, you might expect the total space between `.box1` and `.box2` to be 50 pixels (20 pixels plus 30 pixels). However, due to margin collapsing the actual space will be 30 pixels, which is the larger of the two margins. -As we saw in the previous examples, margins of the adjacent sibling elements will collapse. This is the most straight forward case of margin collapsing. Let's explore more cases where margin collapsing can occur. +As we saw in the previous example, margins of the adjacent sibling elements will collapse. This is the most straight forward case of margin collapsing. Let's explore more cases where margin collapsing can occur. Margins can also collapse between a parent element and its first or last child. If there's no border, padding, inline content, or clearance to separate the parent's margin from the child's, they will collapse. @@ -62,7 +62,7 @@ Margins can also collapse between a parent element and its first or last child. ::: -In this case you might expect the child to be 70 pixels from the top (40 pixels plus 30 pixels). However, the margins collapse and the larger margin 40 pixels is used. +In this case, you might expect the child to be 70 pixels from the top (40 pixels plus 30 pixels). However, the margins collapse and the larger margin of 40 pixels is used. If an element has no content, padding, or border, its top and bottom margins can collapse into a single margin. @@ -88,7 +88,7 @@ If an element has no content, padding, or border, its top and bottom margins can In this example, the `empty-block`'s top and bottom margins collapse into a single 20 pixels margin, the larger of the two. -Here's another example of preventing collapse using padding: +Here's an example of preventing collapse using padding: :::interactive_editor @@ -112,9 +112,9 @@ Here's another example of preventing collapse using padding: ::: -In this case the one pixel padding on the parent prevents the margin from collapsing resulting in a total space of 71 pixels from the top of the parent to the top of the child content. +In this case, the one pixel padding on the parent prevents the margin from collapsing resulting in a total space of 71 pixels from the top of the parent to the top of the child content. -Understanding margin collapsing is important for precise control over layout and spacing in CSS. While it can sometimes lead to unexpected results, it's a feature designed to create more aesthetic and consistent spacing in documents. By knowing when margin collapsing occurs and how to prevent it when necessary, you can create more predictable and maintainable layouts in your web designs. +Understanding margin collapsing is important for precise control over layout and spacing in CSS. While it can sometimes lead to unexpected results, it's a feature designed to create more aesthetically pleasing and consistent spacing in documents. By knowing when margin collapsing occurs and how to prevent it when necessary, you can create more predictable and maintainable layouts in your web designs. # --questions-- diff --git a/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccc8ea33bad87abb3c56.md b/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccc8ea33bad87abb3c56.md index 67b92e335d0..5a5f8acdf17 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccc8ea33bad87abb3c56.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccc8ea33bad87abb3c56.md @@ -52,7 +52,7 @@ div { In this case, if `content-box` is used the content area will be 300px by 200px. The total rendered size includes padding and borders — for example, total width = 300px (content) + 40px (padding) + 8px (borders) = 348px; the total height is calculated in the same way. -Great — now let's explore `border-box`. It's different because the width and height you set include the element's content, padding, and border (but not its margin). Use `border-box` when you want the element's total size to stay fixed even if padding or borders change — that's often helpful in responsive layouts. +Great! Now let's explore `border-box`. It's different because the width and height you set include the element's content, padding, and border (but not its margin). Use `border-box` when you want the element's total size to stay fixed even if padding or borders change — that's often helpful in responsive layouts. With `border-box`, padding and borders are included inside the element's specified size. The `width` and `height` you set become the element's total dimensions: content + padding + border; margins remain excluded. @@ -89,7 +89,7 @@ In the following example, there are two `div` elements with the same dimensions ::: -You can see that they both have the same `width`, `height`, `padding`, `border` and `margin`. The only differences are the colors and the value of the `box-sizing` property. This small difference has a very important impact on the final dimensions. +You can see that they both have the same `width`, `height`, `padding`, `border` and `margin`. The only differences are in the colors and the value of the `box-sizing` property. This small difference has a very important impact on the final dimensions. Choosing between `content-box` and `border-box` really depends on the specific needs of your project. While `border-box` is becoming increasingly popular for its simplicity and flexibility, understanding both models is important for implementing effective CSS layouts. diff --git a/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md b/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md index 94f2e149847..157d89288ba 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccdb8f1823d8c60f914c.md @@ -32,13 +32,13 @@ Custom CSS resets are stylesheets that you create from scratch to fit the need o ::: -It's usually written at the top of the CSS stylesheet. The asterisk star selector is a wildcard selector that matches all HTML elements, so they will have a default margin of zero and a default padding of zero on all four sides. This will give you a starting point and then you can customize them in more specific CSS selectors further down in the stylesheet. +It's usually written at the top of the CSS stylesheet. The asterisk selector is a wildcard selector that matches all HTML elements, so they will have a default margin of zero and a default padding of zero on all four sides. This will give you a starting point and then you can customize them in more specific CSS selectors further down in the stylesheet. -You can use this approach to select any HTML element and reset its default styles, just create a custom stylesheet and use the appropriate CSS selectors to match the elements and set the styles. +You can use this approach to select any HTML element and reset its default styles. Just create a custom stylesheet and use the appropriate CSS selectors to match the elements and set the styles. -But this can be a time intensive process if you want to save time you can also use a third-party CSS reset. These stylesheets are already pre-built so you can just download them and add them to your project directly. A great example of a third-party CSS reset is `Normalize.css`. This stylesheet normalizes styles for a wide range of HTML elements while still keeping some useful default styles especially those that are important for accessibility. It also corrects bugs and style inconsistencies. +But this can be a time intensive process. If you want to save time, you can also use a third-party CSS reset. These stylesheets are already pre-built so you can just download them and add them to your project directly. A great example of a third-party CSS reset is `Normalize.css`. This stylesheet normalizes styles for a wide range of HTML elements while still keeping some useful default styles especially those that are important for accessibility. It also corrects common bugs and style inconsistencies. -Another option is `sanitize.css`. This is a CSS library that you can use to ensure that default styles will be consistent across all major modern browsers. This library is developed alongside `Normalize.css` so they evolve together. It also has individual stylesheets that you can download for specific purposes like normalizing forms and typography. +Another option is `sanitize.css`. This is a CSS library that you can use to ensure that default styles will be consistent across all major modern browsers. This library is developed alongside `Normalize.css`, so they evolve together. It also has individual stylesheets that you can download for specific purposes like normalizing forms and typography. There are many options available but you should choose the ones that best fit the needs of your project. You can also combine both approaches using third-party CSS resets with custom resets.