如何微调Header中文本的左右位置？

当前代码里justify-items: center会让文本完全居中，要微调左右位置，可以用以下几种方法：

方法1：通过容器内边距调整 #

修改.header的CSS，将justify-items改为左对齐，再用padding-left控制文本偏移：

.header {
  background-color: gray;
  grid-column-start: 1;
  grid-column-end: 3;
  display: grid;
  justify-items: start; /* 改为左对齐 */
  align-items: center;
  padding-left: 20px; /* 调整数值即可微调左位置 */
}

方法2：给文本元素加外边距 #

先给文本元素加个类名，方便单独控制：

<div class="header">
  <font class="header-text" color="white" size="3"> Header# email things</font>
</div>

然后用margin-left或margin-right微调位置：

.header {
  background-color: gray;
  grid-column-start: 1;
  grid-column-end: 3;
  display: grid;
  align-items: center;
}
.header-text {
  margin-left: 15px; /* 自定义左偏移量 */
}

方法3：使用网格子元素的justify-self属性 #

直接针对Header内的文本元素设置对齐和偏移：

.header {
  background-color: gray;
  grid-column-start: 1;
  grid-column-end: 3;
  display: grid;
  align-items: center;
}
.header font {
  justify-self: start; /* 基础对齐方式 */
  margin-left: 25px; /* 微调偏移 */
}

额外建议 #

<font>标签是HTML过时标签，推荐用<span>替代，把样式统一写在CSS里更规范：

<div class="header">
  <span class="header-text">Header# email things</span>
</div>

.header {
  background-color: gray;
  grid-column-start: 1;
  grid-column-end: 3;
  display: grid;
  align-items: center;
  padding-left: 20px;
}
.header-text {
  color: white;
  font-size: 1.2rem; /* 对应size="3"的效果 */
}

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