Question

CSS：

h1 {
    width: 25%;
    margin: 11rem auto;

    font-family: 'Baron Neue';
    font-size: 4vw;
    color: white;
    text-align: center;

    border-top: solid 2px white;
    border-bottom: solid 2px white;
}

HTML：

<h1>POTJESMARKT</h1>

h1标记的父级为<body> </body>。

问题是顶部的边框没有附加到h1，而那里没有填充。我最终想要的是关于h1和边界之间，顶部和底部的1rem填充。我可以通过在h1的底部添加填充来解决这个问题，但是如果我然后调整浏览器窗口的大小，则从顶部和底部到h1到边框的距离不再相等。

h1 with borders

Chrome developer tools

Answer 1

以“丑陋”的方式解决它：

我添加了padding-bottom: 1vw;

这样，填充与h1一起缩放，这使得它可以接受。

Answer 2

在技术上看，它在工作：

＆＃13;

html,body{background:red;}
h1 {
    width: 25%;
    margin: 11rem auto;

    font-family: 'Baron Neue';
    font-size: 4vw;
    color: white;
    text-align: center;

    border-top: solid 2px white;
    border-bottom: solid 2px white;
}

＆＃13;

<h1>POTJESMARKT</h1>

＆＃13;

由于我实际上没有安装你的字体样式，我相信你的问题在于字体本身。为了修复＆＃39;你可以这样做;

答：找出字体的基线边距（以px为单位）并添加额外的＆＃39; top＆＃39;填充到你的h1元素
B：使用不同/更常见的字体
C：＆＃39;猜猜＆＃39;通过在元素中添加一些填充底部。

我想注意几点：

确保您导入您的字体（以便每个人都能使用＆＃39;它（即谷歌字体））
除非实际需要

，否则我不会热衷于使用vw和vh
再次，个人偏好会阻止我使用＆＃39; rem＆＃39;值，并坚持使用em，px或其他方式。

Answer 3

这是一个语义答案：Header fiddle

html：

<h1><strong>Potjes market</strong><h1>

<强>的CSS：

h1 {
  font-size:4em;
  border:3px solid blacK;
}
h1 > strong {
  position:relative;
  bottom:0.1em;
}`

这会略微向上推动文本，使边框看起来甚至在上方和下方

h1元素到边界的距离在顶部和底部不同

3 个答案: