CSS - 邊框標題不居中

-1

我有一個問題，我根本無法弄清楚。我的標題在左側有邊框，在左側有一些填充。 CSS（SASS）定義如下：CSS - 邊框標題不居中

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

東西是文本看起來像它有填充底部（這是不正確的）。如果我在頂部擴展填充，它會添加填充，使其看起來居中，但它不是我想要的。我只是希望邊框與文本平齊，而不添加任何額外的填充。

我曾嘗試在padding-bottom設置負值，但這並不做任何事情。當我用鉻檢查器檢查元素時，我也看到：

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

來源

2016-02-20 user3056783

哪裏是HTML？ –

嘗試添加JSFiddle示例並檢查「行高」值。 – Konrud

目前爲止您提到的規格對我來說很不錯。 https://jsfiddle.net/efh5zeba/7/ –

行高似乎可以解決您的問題。與字體大小匹配它（或更少，這取決於你的口味是什麼）使得它具有相同的高度：

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

來源

2016-02-20 22:14:30 adamk22

CSS - 邊框標題不居中

回答

相關問題