従来の先頭とCSSの行の高さ

CSSの仕様では、指定された値を2で割って上下に1行のテキストを適用することによって、行の高さをテキストに適用する必要があると規定されています。従来の先頭とCSSの行の高さ

これは、伝統的な先行理解とは大きく異なります。これは通常、テキストの行の上にだけスペースが追加されることを意味します。（これは100％正確ではないことが分かっています。なぜなら、実際に行の高さはスペースを追加せずに行の高さを設定するからです;しかし、この方法で問題を簡単に説明できます）。

この例マークアップを考える：

<!DOCTYPE html> 
<html> 
    <head> 

    <style type="text/css"> 
    p 
     { 
     margin:0; 
     font-size: 13pt; 
     line-height: 15pt; 
     } 
    h1 
     { 
     margin:0; 
     font-size: 21pt; 
     line-height: 30pt; 
     } 
    </style> 

    </head> 
    <body> 

    <h1>Title</h1> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> 
    <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> 
    <p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p> 
    </body> 
</html>

行の高さが先頭の伝統的な理解に等しかった場合、<h1>と第<p>との間の距離が<p>「Sとの間の距離に等しくなり、この距離ため先頭に定義されます。しかし、そうではありません。

<p>の間の距離が（p's line-height - p's font-size = 15 - 13 = 2pt）一貫性を維持しながら、<h1>と第<p>との間の距離が異なっている：それは(p's line-height - p's font-size)/2 + (h1's line-height - h1's font-size)/2 = (15 - 13)/2 + (30-21)/2 = 5.5ptに等しいです。

これは、上記のマークアップがブラウザで処理されている場合は、目に見えることがあります。

問題は、ページ上に垂直方向の視覚リズムを維持する伝統的な方法は、基本的なリーダーの倍数で要素の先頭を設定することです。上記のように、このメソッドはCSSでは適用できません。

私は3つの質問を持っている：

は、行の高さの私の理解ですリードすると、その違いが正しいですか？
CSSで縦型リズムを維持する方法はありますか（CSSで伝統的な方法を模倣するかどうか）
（ボーナスの質問）行の高さを先導と異なるようにする理由は何でしたか？

更新日：入力いただきありがとうございます！私は自分のソリューションを提案し、私はそれ上の任意のコメントのために非常に感謝されると思いますので、予めご了承ください。https://stackoverflow.com/a/8335230/710356

出典

2011-12-01 sbichenko

さてさて、これは私の他のソリューションよりも優れて動作しているようです。ブロック要素の内部にはさらに<span>が使用されます。そのトリックは、ブロック要素のline-heightを1に設定し、スパンのline-heightを調整し、上端と下端をともにキャンセルすることですmargin。これには、ディスプレイをinline-blockに設定する必要があります。

実際にはマージン（<h1>と<p>の間のラインハイブレイクを行うように）を設定することは非常に困難になり、数学を必要とします。だから、私が思うに、伝統的なタイポグラフィーアプローチを先導的に使用しようとすると、実際に開発者の仕事に雇用されるのに時間がかかりすぎます。

とにかく、ここで最終的なコードです：

<!DOCTYPE html> 
<html> 
    <head> 

     <style type="text/css"> 

     span.p 
      { 
      display:inline-block; 
      line-height: 32px; 
      } 

     span.h 
      { 
      display:inline-block; 
      line-height: 64px; 
      margin-top: -32px; 
      margin-bottom: -32px; 
      } 

     p 
      { 
      margin:0; 
      font-size: 26px; 
      line-height: 1; 
      } 
     h1 
      { 
      margin:0; 
      font-size: 42px; 
      line-height: 1; 
      } 
     </style> 

    </head> 
    <body> 

    <h1><span class="h">Molloy</span></h1> 
    <p><span class="p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span></p> 
    <p><span class="p">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</span></p> 
    <h1><span class="h">Lorem Ipsum is simply</span></h1> 
    </body> 
</html>

出典

2011-12-01 12:10:30 sbichenko

はい
はい。それは非常に単純ではありませんが、position:relative;を使用して、あなたは物事を正しく並ぶように取得することができ、例えば：ここで
```
h2 { 
    font-size: 36px; 
    line-height: 48px; 
    position: relative; 
    top: 6px; 
} 
```
は、作業中のdemo
CSSを設計した人ではないですtypographers。おそらく意図的ではありませんでした。
ボーナスの答え：Here is a talkジョナサン・ホープラー（Jonathan Hoefler）、ウェブのタイプとCSSの限界に関する問題について。

出典

2011-12-01 00:16:42 bookcasey

ありがとうございます！しかし、リンク先のデモは空のgifファイルであるようです。また、あなたのコードに負の値はありません。 – sbichenko

申し訳ありませんが、私はリンクを修正し、私が負の値を使用しなかったことを思い出しました。 :-) – bookcasey

実際には垂直リズムを維持するために、ポジショニングを使う必要はありません。これは、一貫した行の高さ（フォントサイズに相対）と下マージンを確保することによって行うことができます。 – joshnh

私は自分の答えを追加していますが、私はこのメソッドを思いついただけで十分に徹底的にチェックしていないので、「受け入れられた」とマークしていません。マークアップの読みやすさの面でもかなり面倒です。

トリック我々は<span>タグで私たちの見出しを適用するすべての要素をラップし、<span>'s CSSプロパティmiddleまたはsubのいずれかにvertical-alignを設定することである（彼らはわずかに異なる結果を生成する、と私はどちらかの理由はわからないんだけどまたはそれらがどのように正確に異なるか）およびline-height〜0。その結果は必要なものに非常に近いので、上記の例では<h1>と<p>の間の距離はほぼ正しく（明らかにではない）、すなわち<p>の行の高さに等しくなります。私はCSSでうまくいかないので、全体的なレイアウトにどのように影響するのか、そのようなハックを使用するのが受け入れられるのかどうか、そしてこれがブラウザに優しいのかどうかはわかりません。あなたが私の解答にコメントしたら、私は感謝しています。

例のマークアップ：

<!DOCTYPE html> 
<html> 
    <head> 

     <style type="text/css"> 

     span.lh 
      { 
      vertical-align: sub; 
      line-height:0 
      } 
     p 
      { 
      margin:0; 
      font-size: 26px; 
      line-height: 30px; 
      } 
     h1 
      { 
      margin:0; 
      font-size: 42px; 
      line-height: 60px; 
      } 
     </style> 

    </head> 
    <body> 

    <h1><span class="lh">Title</span></h1> 
    <p><span class="lh">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span></p> 
    <p><span class="lh">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</span></p> 
    <h1><span class="lh">Lorem Ipsum is simply</span></h1> 
    </body> 
</html>

出典

2011-12-01 00:49:31 sbichenko

これの欠点は、保守性とセマンティクスです。 CSSが私たちにいくつかのオプションを提供してくれればいいとは思いませんか？ – joshnh

SASSまたはCompassを試す – sarink

私はこのスレッドが古い実現が、私はあまりにもこの問題を抱えていました。 Microsoft Wordなどのワードドキュメントエディタと同じタイポグラフィ効果が必要な場合は、行の高さ1を含む特殊なケースがあります。

line-heightではなく1です。 put line-height：normal;他の行の高さの値は同じままです（1.5など1.5のまま）。

出典

2015-09-03 23:36:37

従来の先頭とCSSの行の高さ

答えて

関連する問題