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

【问题标题】：CSS to position text based on Top of text?CSS根据文本顶部定位文本？
【发布时间】：2010-05-22 20:38:09
【问题描述】：

当我在 CSS 中更改字体的大小时，如何使无论字体大小（从 12 像素到 200 像素），文本的“大写高度”（图片）始终“可视化” ' 顶部有 10px 的内边距？

否则我所做的是每次更改字体大小时，我都必须返回并重新定位顶部/边距顶部等。

这是我所拥有的：

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 从 160 像素更改为 20 像素，空白区域会按比例变小...我该如何解决？

注意：它会添加 20px 额外的空白，即使 margin:0;padding:0;...

【问题讨论】：

你试过设置包含元素的 padding-top 吗？
看来我必须设置 line-height: 0.8 才能设置正确的基数。然后我可以使用填充...这是为什么呢？
可能是添加了您所说的 20px，因为您在
中添加了一个

标签。如果您没有重置

标签上的边距和行高，就会发生这种情况。更好的是，只需去掉

标签。

标签： css typography

【解决方案1】：

如果你的意思是在大写高度的“顶部”，而不是在大写高度边距内，那么你可以将 CSS 填充应用于字体元素或其父容器：

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

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

或者...

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

.something {padding-top: 10px;}

根据您应用的其他样式，其中一种方法是否合适。

【讨论】：

【解决方案2】：

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

编辑：

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

【讨论】：

没用，我还有 20px 的空白来自某个未知的地方。如果我将 line-height 设置为 0，则它是大部分字母的开始位置。行高必须发挥作用，不是吗？
好吧，文本总是在行框中垂直居中，这就像将垂直对齐设置为 50%。所以根据字体大小，会溢出行框。

【解决方案3】：

否则我所做的就是每次我改变字体大小，我得走了返回并重新定位顶部/边距顶部等等

为什么不设置该文本上方和下方元素的bottom 和margin-bottom 呢？这样你就不用修改文字样式了，缝隙总会有的。

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

【讨论】：

中添加了一个