傳統領先和CSS行高

CSS規範指出，應通過將指定值除以2並將結果應用於文本行的上方和下方來將行高應用於文本。傳統領先和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>的之間的距離，因爲該距離由領導定義。然而，這種情況並非如此。

雖然<p> S之間的距離保持一致（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 s取消。請注意，這需要將顯示設置爲inline-block。

但是，實際設置邊距（以便在<h1>和<p>之間產生高折線）變得非常困難並且需要一些數學計算。所以，我猜想，嘗試使用傳統的排版方法來領導CSS在開發人員的工作中實際使用起來太耗費時間。

總之，這裏的最終代碼：

<!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的人是不排版。這可能不是故意的。
Jonathan Hoefler的獎金回答：Here is a talk關於Web設計類型和CSS限制的問題。

來源

2011-12-01 00:16:42 bookcasey

謝謝！但是，您鏈接的演示程序似乎是空的gif文件。另外，我在代碼中看不到任何負值。 – sbichenko

對不起，我修復了鏈接，並記住我沒有使用負值。 :-) – bookcasey

實際上，您不需要使用定位來保持垂直節奏。可以通過確保一致的行高（相對於字體大小）和底部邊距來完成。 – joshnh

我正在添加自己的答案，但我並未將其標記爲「已接受」，因爲我只是想出了這種方法，並沒有對它進行足夠徹底的檢查。在標記可讀性方面也很麻煩。

訣竅是包裝的每一個元素，這是我們要運用我們的標題在<span>標籤，並設置<span>'s CSS屬性vertical-align要麼middle或sub（它們產生稍有不同的結果，我不知道爲什麼任或他們如何完全不同）以及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或指南針 – sarink

我意識到這線程是老了，但我也有這個問題。如果您想要與Word文檔編輯器（如Microsoft Word）具有相同的排版效果，則會出現一個特殊情況，其中包含行高度1.

而不是行高：1;放線高度：正常;。其他線高度值保持不變（1.5保留1.5等）。

來源

2015-09-03 23:36:37

傳統領先和CSS行高

回答

相關問題