减少航向h1和边界之间的距离？

Question

我试图减小h1元素中文本与右边框之间的距离，使其看起来像一条小垂直线，将其与下面的文本分开。

这就是我目前的css：

.test{
   border-right: 2px solid black;
   padding-right: 0px;
}

右边框仍然显示在右边很远，虽然我认为通过将填充设置为右边的0px，它应该直接显示在文本旁边。

我想这是一个非常愚蠢的问题，我还是初学者！

提前致谢

Answer 1

默认情况下，

h1元素为display: block（width: 100%}，这意味着它们会扩展到容器的整个宽度。

如果您希望元素只有它所需的宽度，请改为display: inline-block（然后使用填充，如您所识别的那样）来确定文本末尾之间的距离和右边界）：

.test{
   border-right: 2px solid black;
   padding-right: 0px;
   display: inline-block;
}

<h1 class="test">This is a test</h1>

Answer 2

h1元素默认为display:block，默认为100％宽度。尝试更改width:300px或display:inline-block。