Html 减少文本和边框之间的空间？

我正在创建一个门户网站社交媒体页面。我希望页面中间的文本在文本的周围有一个边框。然而，每当我在CSS中添加边框时，它似乎会在整个页面而不是文本中添加边框。是否有任何方法可以减少文本和边框之间的空间

html，
身体{
背景色：#000000；
身高：100%；
宽度：100%；
保证金：0；
填充：0；
边界：0；
溢出：隐藏；
}
ben_buchanan先生{
字体系列：“蒙特塞拉特”，无衬线；
颜色：#FFFFFF；
字体大小：72px；
身高：90%；
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
边框：1px实心#FFFFFF；
}
.句号{
背景：无；
颜色：#FFFFFF；
-webkit动画：脉动3秒放松；
-webkit动画迭代计数：无限；
不透明度：0；
}

---

BEN BUCHANAN.

边框适用于元素的整个“边界框”。由于已为元素指定了宽度和高度，因此边框将围绕该区域

解决方案是在

.ben_buchanan

元素中创建一个内联元素，这个元素实际上包含文本和边框

所以

本·布坎南。 变成

<h1 class="ben_buchanan">
    <span class="inside_text">BEN BUCHANAN<mark class="fullstop">.</mark></span>
</h1>

本·布坎南。

---

将边框应用于

。在_text

中，将边框应用于H1 div，它占据了页面的90%高度。因此，屏幕边缘会出现一个边框，而不是文本周围

在您的情况下，可以在H1标记周围有一个包装div，它应该有

display:flex

和定义的高度。然后使用

垂直对齐：中间使所有内部内容元素垂直居中

H1有显示块，可以显示整个屏幕宽度。因此，要使边框位于内容的左右两侧。
使H1显示为
显示：内联块
，以便垂直对齐将对其产生影响。并应用
margin:0 auto
，使文本水平居中

因此，文本最终将在页面中居中对齐（垂直和水平），并在其周围加上边框

通过对h1应用填充，可以增加边框和文本周围的空间

查看下面的代码片段


/*概述*/
html，正文{
背景色：#000000；
身高：100%；
宽度：100%；
保证金：0；
填充：0；
边界：0；
溢出：隐藏；/*将隐藏x轴和y轴上超出元素范围的任何内容，因此不需要滚动条*/
}
/*班级*/
.名称包装器{
对齐项目：居中；
显示器：flex；
身高：90%；
垂直对齐：中间对齐；
}
ben_buchanan先生{
边框：1px实心#ffffff；
颜色：#ffffff；
显示：内联块；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：72px；
保证金：0自动；
}
.句号{
背景：无；
颜色：#FFFFFF；
-webkit动画：脉动3秒放松；
-webkit动画迭代计数：无限；
不透明度：0；
}
/*动画*/
@-webkit关键帧脉动{
0% { 
不透明度：0；
}
50% { 
不透明度：1.0；
}
100% { 
不透明度：0；
}
}
/*杂*/
.禁用\u文本\u突出显示{
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
-o-用户选择：无；
用户选择：无；
}

本·布坎南
本·布坎南。
您可以先将h1样式设置为如下：

<h1 style='border:2px black solid;'>BEN BUCHANAN<mark 
class="fullstop">.</mark></h1>

这将解决您的边界没有环绕文本的问题。
非常感谢您的回复@BenBuchanan现在元素将与页面中间对齐。查看代码片段，感谢您的回复！感谢您对showdev的编辑。我还是新来的，所以不熟悉我的帖子的格式。非常感谢所有的回复！
<h1 style='border:2px black solid;'>BEN BUCHANAN<mark 
class="fullstop">.</mark></h1>

h1{
   display:inline;
}