求助：消除垂直Div之间的间距问题

Hey Ben, I spot the issue right away—those annoying gaps between your colored divs are caused by margin collapse, a super common CSS quirk. Let me break it down and show you how to fix it quickly:

Why the Gaps Exist #

Your <h2> tags inside #about, #projects, and #contact have default browser styles that include a margin-top value (usually around 20px). When a parent element (your div) doesn’t have a border, padding, or overflow property to "contain" the child’s margin, that margin bleeds outside the parent and creates a gap between it and the previous div. Your #intro div doesn’t have an h2, which is why the first gap only shows up after it.

Easy Fixes (Pick One That Fits Your Style) #

1. Reset the H2 Default Margin

This is the cleanest approach if you don’t need that default top spacing on your headings. Add this rule to your CSS:

h2 {
  margin-top: 0;
}

2. Contain the Margin with Overflow

Adding overflow: auto to your section divs creates a new block formatting context that stops the child margin from escaping the parent. No visual changes, just fixes the gap:

#about, #projects, #contact {
  overflow: auto;
}

3. Add a Transparent Border

If you want to keep the h2’s margin but still block the collapse, add a tiny invisible border to the top of your section divs. It won’t affect your layout at all:

#about, #projects, #contact {
  border-top: 1px solid transparent;
}

Modified CSS Example (Using Option 1) #

Here’s how your full CSS would look with the h2 margin reset:

html, body { padding: 0; margin: 0 auto 0 auto; height: 100%; }

#header { width: 100%; margin: 0px; padding: 12px 0px; float: left; background: rgba(238, 238, 238, 0.5); position: fixed; font-family: Arial; font-size: 20px; }

#header-right { float: right; }

#header a { vertical-align: middle; margin: 15px; text-decoration: none; color: #000000; }

#header a:hover { color: #909090; }

.parallax-window { min-height: 400px; background: transparent; }

.content { padding-top: 60px; display: block; background-image: url('kalle-kortelainen-242413-unsplash.jpg'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

#intro { min-height: 800px; padding-top: 60px; background-color: #ef69a1; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

#about { min-height: 800px; padding-top: 60px; background-color: #82ff9e; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

#projects { min-height: 800px; padding-top: 60px; background-color: #2092e4; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

#contact { min-height: 800px; padding-top: 60px; background-color: #dfee80; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

/* New rule to fix margin collapse */
h2 {
  margin-top: 0;
}

Your jQuery smooth scroll code is totally unrelated here, so you don’t need to touch that at all! Any of these methods will eliminate those unwanted gaps between your parallax sections.

内容的提问来源于stack exchange，提问作者Ben Wu