如何消除Bootstrap 4页面中两个区块间的白色间隙？

Hey there! Let's tackle those frustrating white gaps between your page sections. Based on your setup (fixed header, absolute-positioned contact/footer, and Bootstrap 4), the issue almost always stems from default browser styles, Bootstrap's built-in margins/paddings, or positioning conflicts. Here's how to fix it step by step:

1. Reset Default Browser Styles #

Most browsers add default margins/paddings to <html> and <body> (like Chrome's 8px margin on body), which can create unexpected gaps. Start by overriding these:

html, body {
  margin: 0;
  padding: 0;
}

2. Remove Bootstrap's Built-in Margins/Paddings #

Bootstrap adds default spacing to many components (like footers or containers). Target your sections directly to strip unwanted margins:

/* Clear margins/paddings from your core sections */
header, main, #contact-information, footer {
  margin: 0;
  padding: 0;
}

/* Fix Bootstrap's default footer spacing */
.footer {
  margin-top: 0; /* Bootstrap's footer often has a default top margin */
}

Pro tip: Make sure your custom CSS file loads after Bootstrap's CSS file. This lets your styles override Bootstrap's without needing !important.

3. Fix Positioning-Related Gaps #

Your fixed and absolute-positioned elements can cause gaps if their positioning properties aren't set correctly:

• For your fixed header: Ensure it spans the full width and has no bottom margin:

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin-bottom: 0;
}

• For your absolute-positioned contact section and footer: Make sure their top/bottom values align with the previous section to avoid gaps. For example, if your footer should stick to the bottom:

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
}

Note: If your fixed header covers part of your main content, add padding-top to <main> equal to your header's height—but don't set it too high, as that'll create a gap!

4. Diagnose with Browser Dev Tools #

If the gaps still exist, use your browser's developer tools (F12) to inspect the gap area. Look at the "Box Model" panel to see if a section has unexpected margin or padding. You can also check for hidden pseudo-elements (::before/::after) that might be adding space.

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