2014-09-04 82 views
0

我正在使用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%; 
} 
+5

你问一个造型的问题,但我们展示这没有好处的HTML。我怀疑这将与文本上的边距有关。 – Rob 2014-09-04 19:47:29

+0

@Rob是的,我没有真正看到发布css,因为它只是改变字体大小和背景颜色,我试着改变.title有'margin:0px;'是你的意思? – 2014-09-04 19:51:12

+1

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

回答

2

该空间不是填充;它属于像(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; 
} 
1

太多的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; 
} 
+0

这是不可扩展的。 – 2014-09-04 20:09:04

+0

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

+0

将'line-height'更改为'.65'并添加'padding-top:15px;'在这种情况下起作用,但它可能不适用于不同的字体。 – 2014-09-04 20:13:13