为什么左右填充不影响h1的边框？答案

【问题标题】：Why Padding right and left does not affect the border of h1?为什么左右填充不影响h1的边框？
【发布时间】：2023-03-07 00:07:01
【问题描述】：

我正在努力解决这个问题：enter image description here

我希望我的标题的边框填充为左右 1px，但尽管我将它放在 css 文件中，但边框仍然水平放置所有屏幕...... 我希望我的边框适合文本，而不是以那种方式扩展。如果你能提供帮助，谢谢。这是 h1 的 html:<h1 title="they kidnapped me">Doing some testing here</h1><hr>

【问题讨论】：

你的意思可能是 margin 而不是 padding
如果我输入 margin-left:350px 和 margin-right:350px 它会像我想要的那样缩小它问题是当我调整窗口大小时它是一团糟
你需要使用display:inline-block
可能重复：How to prevent <H1>'s from taking up more width than they need。

标签： html css header border padding

【解决方案1】：

H1 默认是占据整行的块元素。使其内联，它只占用文本占用的空间。

body {
  color: white;
  background-color: #192e51;
}

.testing {
  border: 1px double white;
  border-radius: 100px;
  display: inline;
}

.content {
  text-align: center;
}

<div class="content">
  <h1 class="testing"> Doing some testing here </h1>
</div>

【讨论】：