如何使HTML标题（header）宽度变窄而非铺满？

嗨，别担心这根本不是愚蠢的问题！很多刚上手HTML/CSS的小伙伴都会碰到这个小困扰😀

首先得说清楚：HTML里的标题标签（h1到h6）默认是块级元素，所以它们会自动占满父容器的宽度。不过用CSS就能轻松调整，完全不用放弃标题标签（毕竟标题标签对网页的结构语义、SEO和无障碍访问都很重要，能不用替代方案就别用）。给你几个实用的方法：

1. 让标题宽度自适应内容
   把标题改成行内块元素，这样它的宽度就会紧紧包裹住文字内容，同时还能保留块级元素的一些特性（比如设置上下外边距）：

/* 可以针对你需要的标题标签设置，比如h2、h3 */
h1 {
  display: inline-block;
}

如果想让这个窄标题居中显示，只要给它的父元素加一句text-align: center;就ok。

2. 设置固定/最大宽度
   如果你想让标题有一个固定的窄宽度，或者适配不同屏幕的最大宽度，直接用width或max-width就行，还能配合margin实现水平居中：

h2 {
  max-width: 60%; /* 用百分比更适配不同屏幕，也可以写固定像素值比如400px */
  margin: 0 auto; /* 让标题在父容器里水平居中 */
}

3. 视觉上的窄标题（带背景的情况）
   如果是想让标题的背景区域变窄，但文字还是自适应，那就结合inline-block和padding：

h3 {
  display: inline-block;
  background-color: #eee; /* 举个背景色例子 */
  padding: 0.5rem 1.5rem; /* 左右加内边距，让背景区域有合适的宽度 */
}

这样调整完，既保留了标题标签的语义价值，又能实现你想要的窄宽度效果啦！

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