2

替代文字

当我在 CSS 中更改字体的大小时，无论字体大小（从 12 像素到 200 像素），我如何做到这一点，文本的“大写高度”（图片）总是“视觉上”有 10 像素顶部填充？

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

这是我所拥有的：

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：

替代文字 http://ilove4d.com/ex/css-typography.png

这是与line-height: 1： 替代文字http://ilove4d.com/ex/css-typography-2.png

如果我将 160 像素更改font-size为 20 像素，空白区域会按比例变小……我该如何解决？

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

4

3 回答 3

0

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

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

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

或者...

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

.something {padding-top: 10px;}

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

于 2010-05-22T20:43:41.387 回答
0

Try adding padding-top:10px to #header .statement h3 {}

edit:

did you reset the values for #header .statement h3 p {}?

于 2010-05-22T20:51:40.153 回答
-1

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

为什么不设置该文本上方bottom和margin-bottom下方的元素？这样，您不必修改文本样式，间隙将始终存在。

还有为什么在世界上，你可以触摸超过 36px 的字体大小？在任何情况下，您也可以将line-height样式用于类似line-height:30px;或任何值。

于 2010-05-22T20:41:29.963 回答