Pixel Perfect Measure Ansatz für die Ränder

In meinem Team haben wir ein Problem, das mit dem Maß in Pixeln verwandt ist. Wenn Design kam wir die Komponenten der Website zu entwickeln beginnen nach den Design-Spezifikationen, zum Beispiel, sagte der Entwurf von der Verbindung mit dem Namen der Person 18px werden soll, wie man auf dem Bild sehen kann:Pixel Perfect Measure Ansatz für die Ränder

aber wenn wir die Umsetzung gehen und sehen das Ergebnis haben wir mehr (oder manchmal weniger) Pixel, da der Text selbst eine Höhe hat und dann hat die angegebene Marge:

Also in diesem Fall, dass Sie am Ende mit 23px zwischen den zwei Absätzen stattdessen von 18px das Design angegeben und dies einen Defekt in unserem Rückstand zu schaffen.

Wir versuchen, einen besten Weg zu definieren, um diese Probleme zu vermeiden. Irgendwelche Vorschläge?

Beispiel:

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>

Quelle

2017-06-02 Juan Jardim

Wir arbeiten Code-Schnipsel müssen, die das Problem reproduzieren oder sonst können wir nicht sehen, wie/warum/was – LGSon

Padding, Rand, Grenze , Zeilenhöhe, Zoomfaktor, Skalierung, Position ... –

alle aktuellen Ränder entfernen von h2, a, p und diese Zeile Code hinzufügen:

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

Sie entfernen müssen das HTML-def ault margins und set line-height (default 1.333333) zu Ihrer angegebenen Schriftgröße von 16px.

Könnte ich hinzufügen, dass es jedoch sehr schlecht ist, feste Werte für Schriftarten zu verwenden, da Benutzer die HTML-Standardschriftgröße ändern können, um ihre Anforderungen zu erfüllen (nicht alle haben 20/20 Sehvermögen), 1em oder 1rem ist bevorzugt, die standardmäßig 16px ist.

Der richtige Code würde (für Beispiel) sein:

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

Quelle

2017-06-03 00:35:07

Pixel Perfect Measure Ansatz für die Ränder

Antwort

Verwandte Themen