針對邊距的像素完美度量方法

在我的團隊中，我們遇到了與度量單位相關的問題。在設計時就開始開發網站的組件下面的設計規範，例如設計從鏈接到人的名字說的應該是18像素，你可以在圖片中看到：針對邊距的像素完美度量方法

但是，當我們去執行，看看結果，我們有更多的（或有時更少）像素，因爲文本本身所具有的高度，然後具有所指定的空白：

因此，在這種情況下，你結束了代之以兩段之間的23px 18px的設計指定，這會在我們的積壓工作中造成缺陷。

我們正在嘗試定義一種避免此問題的最佳方法。有什麼建議麼？

例子：

h2 { 
 
    font-weight: bold; 
 
    margin-top: 0; 
 
    font-size: 16px; 
 
    margin-bottom: 
 
} 
 

 
a, a:link, a:hover, a:active, a:visited { 
 
    color: #6b94ff; 
 
    text-decoration: none; 
 
    font-weight: normal; 
 
    font-size: 16px; 
 
} 
 
p { 
 
    margin: 0 0 10px; 
 
    font-size: 16px; 
 
}

<div class="col-xs-12 col-sm-7 details"> 
 
     <div class="row"> 
 
      <h2 class="title-link"> 
 
       <a href="/news/updates/imds-first-ever-emba-discovery-expedition-to-vietnam/" target="_self"> 
 
        IMD’s first-ever EMBA Discovery Expedition to Vietnam 
 
       </a> 
 
      </h2> 
 
       <p class="topics"> 
 
        Topics: <span>Economics</span> 
 
       </p> 
 
      <p> 
 
       Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. 
 
      </p> 
 

 
      <a class="promotional" href="#" target="_self"> 
 
       Read more 
 
      </a> 
 
     </div> 
 
    </div>

來源

2017-06-02 Juan Jardim

我們需要努力代碼片段重現該問題，否則我們看不出如何/爲什麼/什麼 – LGSon

填充，邊距，邊框，線條高度，縮放比例，比例尺，位置...... –

從h2，a，p刪除所有當前的利潤率，這行添加到您的代碼：

a,p,h2 { line-height: 16px; margin: 0 0 18px 0 }

您需要刪除HTML def並將行高（默認1.333333）設置爲您指定的字體大小16px。

但是，我可以補充說，對於字體使用固定值是非常不好的做法，因爲用戶應該能夠修改HTML默認字體大小以滿足他們的要求（不是所有的都有20/20視力），1em或無論如何，默認情況下1rem是16px。

正確的代碼將是（你的例子）：

a,p,h2 { line-height: 1rem; margin: 0 0 1.125rem 0 }/* calc(18/16) */

來源

2017-06-03 00:35:07

針對邊距的像素完美度量方法

回答

相關問題