如何解决Bulma中下移标题时背景随之下移的问题？

这个问题是**外边距折叠（Margin Collapse）**导致的：当块级子元素的上外边距和父元素的上边界直接接触时，两者的外边距会合并成一个，看起来就像是父元素被子元素的外边距“拉”下去了，所以body的绿色背景跟着下移，露出了页面顶部的白色区域。

以下是几种简单的修复方法：

方法1：给body添加Bulma的is-flow-root类 #

这个类会给元素设置display: flow-root，专门用来阻止外边距折叠，同时不影响其他样式：

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  <title>Website</title>
  <link rel="icon" type="image/x-icon" href="icon.ico?v=2" />
</head>
<body class="has-background-success is-flow-root">
   <h1 class="is-size-2 mt-2 pr-6 has-text-white">Website</h1>
</body>
</html>

方法2：用内边距替代外边距 #

把h1的mt-2（上外边距）换成pt-2（上内边距），内边距不会触发外边距折叠，同样能让标题下移：

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  <title>Website</title>
  <link rel="icon" type="image/x-icon" href="icon.ico?v=2" />
</head>
<body class="has-background-success">
   <h1 class="is-size-2 pt-2 pr-6 has-text-white">Website</h1>
</body>
</html>

方法3：给body添加最小高度并清除默认外边距 #

给body设置min-height: 100vh让它占满视口高度，再加上m-0清除默认外边距，也能解决问题：

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  <title>Website</title>
  <link rel="icon" type="image/x-icon" href="icon.ico?v=2" />
</head>
<body class="has-background-success min-vh-100 m-0">
   <h1 class="is-size-2 mt-2 pr-6 has-text-white">Website</h1>
</body>
</html>

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