标题中文本上方和下方的白条

Question

可能我缺少一些基本的东西，但这里是小提琴：

https://jsfiddle.net/cqn5g94r/5/

＆＃13;

＆＃13;

html {
  background: black;
}

.header {
  font-size: 6vh;
  color: rgb(245, 246, 230);
  text-align: center;
  background: linear-gradient(to right, #45adc1, #64f1c2);
  /* DELETE THE BORDER*/
  border: 1px solid #333;
}

＆＃13;

<div id="header" class="header">
  <p>My Title</p>
</div>

＆＃13;

＆＃13;

＆＃13;

如果删除边框，可以看到整个内容缩小。我希望它更薄，但没有上下的空间。有人帮忙吗？