如何将h1元素定位到自定义带边框盒子的顶部

核心原因有两点：

• 你给父容器.lftSector设置了padding: 50px，该规则会给盒子四个方向均添加50px内边距，顶部的内边距会把内容整体往下推
• h1标签自带浏览器默认的上外边距，进一步拉大了和盒子顶部的距离

修改方法 #

1. 调整父容器的内边距规则，移除顶部内边距：把.lftSector里的padding: 50px修改为padding: 0 50px 50px 50px，四个参数分别对应上、右、下、左四个方向的内边距
2. 清除h1的默认上外边距，新增对应CSS规则即可

修改后的完整CSS示例：

:root {
  --border-width: 100px;
  --border-height: 200px;
  --border-color: #000;
  --box-color: #A8CCC9;
  --background-color: #75B9BE;
}

.lftSector {
  border-style: dashed;
  width: var(--border-width, 100px);
  height: var(--border-height, 200px);
  /* 仅保留右、下、左三个方向的内边距 */
  padding: 0 50px 50px 50px;
  border: 6px solid var(--border-color, gray);
  background-color: var(--box-color);
}
/* 新增规则清除h1默认上外边距 */
.lftSector .content {
  margin-top: 0;
  /* 如果需要预留一点顶部间距，可以改成小数值，比如 margin-top: 8px */
}
body {
  background-color: var(--background-color);
}
ol {
  width: var(--border-width);
  float: left;
}

额外补充建议 #

你的HTML代码里<ol>的直接子元素是<a>不符合语义规范，建议调整为<li>作为<ol>的直接子元素，把<a>放在<li>内部：

<ol>
  <li><a href="linkoftruth"><div id="beta">[BETA]</div> Transformation</a></li>
</ol>

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