如何设置边框宽高使其包裹文本？h1标签边框应写在何处？

1. 如何让边框完全包裹文本？ #

默认情况下，<h1>这类块级元素会占满父容器的全部宽度，直接加边框自然会拉伸到页面两侧。要让边框刚好贴合文本，你可以用这几种CSS方案：

• 用 display: inline-block：把块级元素改成行内块，它的宽度会自动适配内容，同时还能保留块级元素的特性（比如设置上下外边距）：

h1 {
  display: inline-block;
  border: 2px solid #333;
  padding: 8px 12px; /* 可选：给文本和边框加些间距，视觉更舒服 */
}

• 用 width: fit-content：保持元素的块级属性，但宽度收缩到刚好容纳内容，还能通过margin: 0 auto让标题居中：

h1 {
  width: fit-content;
  margin: 0 auto; /* 让标题在页面中间 */
  border: 2px solid #333;
  padding: 8px 12px;
}

• 嵌套内联元素（按需使用）：如果需要更精细的控制，也可以在<h1>里套个<span>，给<span>加边框，适合只给标题部分内容加边框的场景：

<h1><span>我的标题</span></h1>

h1 span {
  border: 2px solid #333;
  padding: 8px 12px;
}
h1 {
  text-align: center; /* 让内部的span居中 */
}

2. 边框相关代码应该写在<h1>内部还是单独标签？ #

其实完全不需要额外的单独标签，直接给<h1>本身加CSS样式是最简洁的方案（就是上面提到的inline-block或fit-content方法）。

如果非要用内部标签（比如<span>）也可以，但属于多一层嵌套，没必要的话尽量简化代码。核心逻辑就是：让承载边框的元素宽度匹配文本，而不是占满整个页面宽度。

给你一个完整的示例，实现居中且边框包裹标题的效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      width: fit-content;
      margin: 20px auto;
      border: 2px solid #2c3e50;
      padding: 10px 16px;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>我的页面标题</h1>
</body>
</html>

这样标题会在页面中间，边框刚好包裹文本，不会拉伸到页面两侧。

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