css - HTML CSS 边框

Question

我正在尝试创建一个围绕标题文本的边框:

#headerwrap h1 {
    border: 5px solid red;
    color: #FFFFFF;
    font-family: 'Patua One', cursive;
    font-size: 4em;
    font-weight: 400;
    margin: 1em 0em 3em 0em;
}

问题是边框跨越了页面的整个宽度，而不仅仅是文本。我已经尝试过 display: inline-block; 但这会使边框离文本太近。

有没有办法在文本周围制作边框，并使用自定义的开头？

Answer 1

除了inline-block，添加一些padding:

padding: 0.1em 0.1em