2

代替テキスト

CSSでフォントのサイズを変更するとき、フォントのサイズ（12pxから200px）に関係なく、テキストの「キャップの高さ」（pic）が常に「視覚的に」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ます。

代替テキスト http://ilove4d.com/ex/css-typography.png

これは次のline-height: 1とおりです： 代替テキスト http://ilove4d.com/ex/css-typography-2.png

を 160px から 20pxに変更するとfont-size、空白が比例して小さくなります...どうすればそれを回避できますか?

注: margin:0;padding:0;... の場合でも、20 ピクセルの余分な空白が追加されます。

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;}

アプローチの 1 つは、適用する他のスタイルに応じて適しています。

于 2010-05-22T20:43:41.387 に答える
0

padding-top:10px を #header .statement h3 {} に追加してみてください

編集：

#header .statement h3 p {} の値をリセットしましたか?

于 2010-05-22T20:51:40.153 に答える
-1

そうしないと、フォントサイズを変更するたびに、戻ってトップ/マージントップなどを再配置する必要があります.

代わりに、そのテキストの上下の要素のbottomandを設定してみませんか? margin-bottomこの方法では、テキスト スタイルを変更する必要はありません。ギャップは常に存在します。

また、なぜ世界で、36px を超える font-size に触れることができるのでしょうか? いずれにせよ、line-heightそのような値やその他の値にスタイルを使用することもできline-height:30px;ます。

于 2010-05-22T20:41:29.963 に答える