CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-07-13 21:15:35 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to margin collapsing lesson (#63019)

Browse Source
This commit is contained in:
Vinson Pham 2025-10-24 04:23:58 -05:00 committed by GitHub
parent 8e36602c17
commit 3cd5a6d1c4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bccae6e556cd81cef6af2.md
View File

@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-is-margin-collapsing
---
# --description--
# --interactive--
Margin collapsing is a fundamental concept in CSS that often confuses newcomers to web development.
@ -15,6 +15,8 @@ Understanding margin collapsing is important for precise control over spacing an
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:
:::interactive_editor
```html
<style>
.box1 {
@ -31,12 +33,16 @@ In CSS when two vertical margins come into contact with each other they'll colla
<div class="box2">Box 2</div>
```
:::
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.
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.
:::interactive_editor
```html
<style>
.parent {
@ -54,10 +60,14 @@ Margins can also collapse between a parent element and its first or last child.
</div>
```
:::
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.
If an element has no content, padding, or border, its top and bottom margins can collapse into a single margin.
:::interactive_editor
```html
<style>
.empty-block {
@ -74,10 +84,14 @@ If an element has no content, padding, or border, its top and bottom margins can
<div class="next-block">Next block</div>
```
:::
In this example the `empty-block`s top and bottom margins collapse into a single 30 pixels margin, the larger of the two.
Here's another example of preventing collapse using padding:
:::interactive_editor
```html
<style>
.parent {
@ -96,6 +110,8 @@ Here's another example of preventing collapse using padding:
</div>
```
:::
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.