Question

我想使秋季服装标头边框的左和右边距文本更近，2px为每个人填充。我试图通过将padding-left和padding-right设置为2px来实现此目的，但是元素仍然保持不变。

下面是我的代码段。

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

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

P.S。 -回答完这个问题后，还可以给我一些如何更好地提出这个问题的提示。我是堆栈溢出的新手，我想以正确的方式变得更好。

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>

如何使边框的左侧和右侧更接近文本

2 个答案: