如何使用HTML/CSS合并网页中的两个section区块？

要消除两个section之间的明显间隔，核心是处理浏览器默认的外边距（margin），同时修正HTML结构中的不规范写法，具体操作如下：

1. 修正HTML结构问题 #

你当前代码里把<h2>嵌套在了<p>标签内，这不符合HTML规范（块级元素不能嵌套在<p>这类行内/块级混合元素里），浏览器会自动修正DOM结构，可能间接影响布局。请调整为：

<section id="Introduction">
  <h2 id="ABC"><big>Introduction</big></h2>
  <p>hello world</p>
</section>

2. 修改CSS消除间隔 #

浏览器会给section、p等元素设置默认margin，这是间隔的主要来源。通过以下CSS调整即可解决：

完整修改后的CSS代码 #

#ABC {
  margin-top: 0;
  padding: 0;
}

a:link, a:visited, a:active {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

body {
  width: 50%;
  margin: auto;
  padding: 0; /* 原代码的zero是错误写法，需改为0 */
  font-family: Arial;
  background-color: lightblue;
}

nav {
  padding: 5px;
  color: mediumpurple;
}

header {
  background-image: linear-gradient(lightgray, wheat);
}

#Introduction {
  background-image: linear-gradient(wheat, white);
  padding: 0;
  margin: 0; /* 清除section默认上下外边距 */
}

#Numbers {
  background-image: linear-gradient(white, lime);
  padding: 0;
  margin: 0; /* 清除section默认上下外边距 */
}

/* 消除两个section内部相邻p标签的外边距重叠 */
#Introduction p:last-child {
  margin-bottom: 0;
}
#Numbers p:first-child {
  margin-top: 0;
}

修改后两个section的渐变背景会完全衔接，中间的间隔即可消失。

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