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

Question

我正在创建一个门户网站社交媒体页面。我希望页面中间的文本周围有一个相对靠近文本的边框。但是，每当我在我的 CSS 中添加边框时，它似乎是整个页面而不是文本的边框。无论如何要减少我的文本和边框之间的空间量？

html,
body {
  background-color: #000000;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}
.ben_buchanan {
  font-family: 'Montserrat', sans-serif;
  color: #FFFFFF;
  font-size: 72px;
  height: 90%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #FFFFFF;
}
.fullstop {
  background: none;
  color: #FFFFFF;
  -webkit-animation: pulsate 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  opacity: 0;
}

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

这是它目前的样子:

这是 code on pastebin .

Answer 1

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

解决方案是在 .ben_buchanan 元素内部创建一个内联元素，这是实际包含文本和边框的元素。

所以

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

成为

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

然后将边框应用于 .inside_text。