如何使边框的左侧和右侧更接近文本[重复]

Question

我想让 Autumn suits 标题的 left 和 right 边框更靠近文本，2px填充它们中的每一个。我试图通过将 padding-left 和 padding-right 设置为 2px 来实现这一点，但元素仍然保持不变。

下面是我的代码的 sn-p。

.outfitsbuttonsheadings {
	padding-left: 2px;
	padding-right: 2px;
	border: 2px solid black;
	text-align: center;
	font-family:'Mali', cursive;

<h3 class="outfitsbuttonsheadings">Autumn outfits</h3>

附： - 在你回答了这个问题之后，你能否给我一些提示，告诉我如何更好地提出这个问题。我是堆栈溢出的新手，我想以正确的方式更好地提问。

Answer 1

h3 元素是跨行延伸的块元素。

如果您希望文本周围的边框紧密，您可以使用span。下面的 CSS 分别定义了 span 和 h3 的类。

span.outfitsbuttonsheadings {
	padding-left: 2px;
	padding-right: 2px;
	border: 2px solid black;
	font-family:'Mali', cursive;
}
  
h3.outfitsbuttonsheadings {
    text-align: center;  /* center text inside the h3 block */
}

<h3 class="outfitsbuttonsheadings">
  <span class="outfitsbuttonsheadings">Autumn outfits</span>
</h3>

Answer 2

您可以使用将 H3 转换为 inline-block 元素，但这会导致非块元素与标题位于同一行：

.outfitsbuttonsheadings {
  display: inline-block;
  padding-left: 2px;
  padding-right: 2px;
  border: 2px solid black;
  text-align: center;
  font-family: 'Mali', cursive;
}

<h3 class="outfitsbuttonsheadings">Autumn outfits</h3>
<span>rest of the text</span>

另一个选项是将宽度设置为fit-content。这将保持block 显示，但它是not supported by all browsers。

.outfitsbuttonsheadings {
  width: fit-content;
  padding-left: 2px;
  padding-right: 2px;
  border: 2px solid black;
  text-align: center;
  font-family: 'Mali', cursive;
}

<h3 class="outfitsbuttonsheadings">Autumn outfits</h3>
<span>rest of the text</span>