CSS - 带边框的标题不居中

Question

我有一个我根本想不通的问题。我的标题左侧有边框，左侧有一些填充。 CSS（SASS）的定义如下：

h1, h2, h3, h4, h5, h6 {
font-family: 'Bebas Neue';
border-left: 2px solid $brand-light;
padding-left: 9px;
}

事情是文本看起来像在底部有填充（这不是真的）。如果我在顶部扩展填充，它会添加填充，使其看起来居中，但它不是我想要的。我只是希望边框与文本一致，而不添加任何额外的填充。

我尝试在padding-bottom设置负值，但这没有做任何事情。当我用chrome检查器检查元素时，我也看到了这一点：

display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;

Answer 1

线高似乎可以解决您的问题。将它与font-size（或更少，取决于你的风味）匹配使它具有相同的高度：

h1, h2, h3, h4, h5, h6 {
font-family: 'Arial';
border-left: 4px solid red;
padding-left: 9px;
box-sizing: border-box;
line-height: 22px;
font-size: 24px;
}

http://codepen.io/adamk22/pen/NxZGNM