嘿，我看了你的代码，发现几个很容易忽略的小问题，正是它们导致了页面上的空白区域，咱们一个个来修复：

1. HTML标签语法错误 #

你的两个<img>标签里的style属性少了冒号，这会导致样式失效，直接打乱布局：

<!-- 错误写法 -->
<img id="logo" src="images/Logo.png" style"width:40%;">
<img id="paysage" src="images/paysage.jpg" style"width:40%;">

<!-- 修正后 -->
<img id="logo" src="images/Logo.png" style="width:40%;">
<img id="paysage" src="images/paysage.jpg" style="width:100%;"> <!-- 这里把固定宽度改成100%避免溢出 -->

2. CSS字体加载写法错误 #

你把多个@font-face合并写在一起，后面的字体定义会覆盖前面的，而且路径用了反斜杠\（Web路径要正斜杠/），会导致字体加载失败，间接影响布局：

<!-- 错误写法 -->
@font-face {
font-family: "oswald";
src: url("fonts\oswald.regular.ttf");
font-family: "lato";
src: url("fonts\Lato-Regular.ttf");
font-family: "playfairdisplay";
src: url("fonts\PlayfairDisplaySC-Regular.otf");
}

<!-- 修正后 -->
@font-face {
  font-family: "oswald";
  src: url("fonts/oswald.regular.ttf");
}
@font-face {
  font-family: "lato";
  src: url("fonts/Lato-Regular.ttf");
}
@font-face {
  font-family: "playfairdisplay";
  src: url("fonts/PlayfairDisplaySC-Regular.otf");
}

3. 浮动元素导致的父容器高度塌陷 #

#logo和#paysage用了浮动，但父容器<header>没有清除浮动，会导致容器高度塌陷，出现多余空白。给header添加清除浮动的样式：

header {
  overflow: hidden; /* 快速清除内部浮动带来的高度问题 */
}

4. 固定宽度和不合理定位导致的溢出 #

• #paysage设置了固定宽度1520px，在小屏幕上会超出页面，产生横向空白，改成相对宽度更合理：

#paysage {
  float: right;
  height: auto; /* 让高度自适应，避免图片拉伸变形 */
  width: calc(100% - 360px); /* 减去logo的宽度+间距，适配不同屏幕 */
  max-width: 100%;
}

• header h1用了bottom:80px的相对定位（虽然注释了position，但如果生效会脱离文档流），换成margin来调整间距更稳妥：

header h1 {
  overflow: hidden;
  border: 0;
  color: #FFFFFF;
  background-color: #01B2C0;
  font-size: 30px;
  font-family: lato;
  margin-top: 20px; /* 用margin代替定位调整上下间距 */
  padding: 25px 0;
  text-align: center; /* 用CSS居中代替<center>标签，更规范 */
}

把这些修改完成后，页面上的空白区域应该就能消失了。这些都是新手做布局时很容易踩的小坑，调整后布局会更稳定~

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