從其底部的文本中刪除填充文本

我正在使用twitter-bootstrap，並且我擁有的是一個帶有一些文本的div，但我似乎無法弄清楚如何將填充關閉的底部。我試過padding-bottom:0px;但那沒有做任何事情。理想情況下，我想我的元素，從這樣看變化：從其底部的文本中刪除填充文本

enter image description here

這樣：

enter image description here

<div class="container-fluid"> 
    <div class="row header text-center"> 
     <div class="col-xs-12 title"> 
      Text 
     </div> 
    </div> 
    <div class="row"> 

    </div> 
</div>

如何擺脫綠色的底部元素（.header）？

.header { 
    background:green; 
} 

.title { 
    color:white; 
    font-size:600%; 
}

來源

2014-09-04 Jim Jones

你問一個造型的問題，但我們展示這沒有好處的HTML。我懷疑這將與文本上的邊距有關。 – Rob 2014-09-04 19:47:29

@Rob是的，我沒有真正看到發佈css，因爲它只是改變字體大小和背景顏色，我試着改變.title有'margin：0px;'是你的意思？ – 2014-09-04 19:51:12

仍然會有助於看到你的CSS ... – 2014-09-04 19:53:11

該空間不是填充;它屬於像（qypj）這樣的下行字母的小寫字母。

一種解決方法由<span>

<div class="col-xs-12 title"> 
    <span>Text</span> 
</div>

被包裹的文本，然後垂直對齊<span>元素如下：

EXAMPLE HERE

.title { font-size: 3em; } 

.title span { 
    height: 1em; /* 1em is equal to the font-size of the parent which is 3em */ 
    display: inline-block; 
    vertical-align: bottom; 
}

來源

2014-09-04 19:57:11

太多的HTML得到一個簡單的事情完成。

DEMO：http://jsbin.com/cadil/1/edit

HTML

<div class="my-title"> 
      <span>Text</span> 
    </div>

CSS

.my-title { 
    background: green; 
    font-size: 30px; 
    color: #fff; 
    text-align: center; 
} 
.my-title span { 
    padding-top: 15px; 
    display: block; 
    line-height: .65; 
    position: relative; 
}

來源

2014-09-04 20:07:10 Christina

這是不可擴展的。 – 2014-09-04 20:09:04

你是什麼意思？ http://jsbin.com/mufik/1 - 使用vw – Christina 2014-09-04 20:10:45

將'line-height'更改爲'.65'並添加'padding-top：15px;'在這種情況下起作用，但它可能不適用於不同的字體。 – 2014-09-04 20:13:13

從其底部的文本中刪除填充文本

回答

相關問題