帶有行高/填充問題的標題邊框底部

我有和h2元素，我給了一個寬度，以便長頭條分成兩行。然後我想添加一個邊框底部的文本，而不是塊元素，所以我已經包裹了h2元素中的文本在我應用邊框的範圍內。就像這樣：

<h2><span>My headline that breaks into two lines</span><h2>

我的CSS是這樣的：

h2 { 
    width: 455px; 
    height:170px; 
    text-align: center; 
    font-size: 67px; 
    line-height: 90px; 
    padding: 0; 
    margin: 0; 
    font-weight: normal; 
} 

h2 span { 
    border-bottom: 2px solid blue; 
}

一切有關工作正常，但我不能讓我的邊界得到任何接近的文本。無論我在行高和填充中添加什麼值，邊框似乎都停留在文本下方30px的位置。有沒有人有什麼聰明的想法，我可以做什麼？我覺得我已經嘗試過所有可能的組合。

非常感謝您提前。

來源

2014-07-03 alxvo

add padding-bottom：10px; demo

h2 { 
    width: 455px; 
    height:170px; 
    text-align: center; 
    font-size: 67px; 
    line-height: 90px; 
    padding: 0; 
    margin: 0; 
    font-weight: normal; 
} 

h2 span { 
    border-bottom: 2px solid blue; 
    padding-bottom:10px;/*add this*/ 
}

來源

2014-07-03 11:01:11

我使用的邊界，而不是文字修飾。用文字修飾下劃線太靠近文字，邊界線太遠... – alxvo

add padding-bottom：5px; –

你真的沒有讀到這個問題。我想讓SMALLER的間距不要更大。 – alxvo

在

我example，你會看到，相對於H2的生產線上，高度，跨度在於剛下伸（如字母Y），是邊境現在更接近底線比你有它？

h2 { 
    text-align: left; 
    width: 400px; 
    font-size: 40px; 
    font-weight: normal; 
    margin: 0; 
    padding: 0; 
    line-height: inherit; 
} 

span { 
    border-bottom: 2px solid blue; 
}

來源

2014-07-03 14:09:49

嗨摩根，不是我恐怕這並不會改變我的任何事情。難道邊界底部可能在下邊界之上嗎？ – alxvo

嗨Alxvo，它沒有意義，因爲邊界必須包裝文本。你必須考慮文本的行高。我會把我的脖子放在這裏，說不。 –

好的，很好，已經解決了。感謝您的輸入！ – alxvo

HTML：

<div class="demo"> 
    <h2> 
     <span>My headline that breaks into two lines</span> 
    </h2> 
    </div>

CSS：

.demo { 
    width: 455px; 
    height:170px; 
    text-align: center; 
} 

h2 { 
    border-bottom: 1px solid red; 
    display : inline; 
    line-height: 90px; 
    padding: 0; 
    margin: 0; 
    font-weight: normal; 
} 

h2 > span { 
    font-size: 67px; 
    line-height: normal; 
}

演示http://codepen.io/gauravsam/pen/PZQwNz

來源

2016-01-22 10:51:29

帶有行高/填充問題的標題邊框底部

回答

相關問題