CSS根据文本顶部定位文本？

Question

当我在CSS中更改字体的大小时，无论字体的大小是什么（从12px到200px），我该如何制作它，文本的“Cap Height”（pic）始终是'视觉上' '顶部有10px填充？

否则我正在做的是每次更改字体大小时，我都要返回并重新定位top / margin-top等。

这就是我所拥有的：

CSS：

#header .statement {
  position: relative;
  background: white;
  padding-top: 10px;
  display: inline;
  float: left;
  margin-left: 0;
  margin-right: 0;
  width: 960px;
}

#header .statement h3 {
  position: relative;
  font-size: 160px;
  letter-spacing: -10px;
  font-weight: bold;
  color: #141414;
  font-family: Helvetica, sans-serif;
  text-align: center;
}

HTML示例：

<div id='header'>
  <div class='intro'>
    Stuff before the statement
  </div>
  <div class='statement'>
    <h3>
      <p>A Statement</p>
    </h3>
    <div class='large_spacer'></div>
  </div>
  <div class='clearfix'></div>
</div>

这就是line-height: 0：

的样子

alt text http://ilove4d.com/ex/css-typography.png

这是line-height: 1： alt text http://ilove4d.com/ex/css-typography-2.png

如果我将font-size从160px更改为20px，则空白区域会逐渐变小......如何绕过它？

注意：它增加了20px额外的空格，即使margin：0; padding：0; ...

Answer 1

如果你真的是指帽子高度的“顶部”，而不是在帽子高度边缘内，那么你可以将CSS填充应用于font元素或其父容器：

<span class="something">Web Typography</span>

span.something {padding-top: 10px;}

... OR

<div class="something"><span>Web Typography</span></div>

.something {padding-top: 10px;}

其中一种方法将取决于您正在应用的其他样式。

Answer 2

尝试将padding-top：10px添加到#header .statement h3 {}

编辑：

您是否重置了#header .statement h3 p {}？

的值

Answer 3

  

否则我每次都在做什么   我改变了字体大小，我得走了   返回并重新定位top / margin-top   等

为什么不在该文字的上方和下方设置bottom和margin-bottom元素呢？通过这种方式，您不必修改文本样式，差距将始终存在。

另外，为什么在世界上，你可以触摸超过36px的字体大小？在任何情况下，您也可以使用line-height样式，例如line-height:30px;或任何值。