Devo definire i margini CSS in pixel o em? Perché? Quando?

Question

Abbiamo un file CSS con alcune regole simili alle seguenti:

.directory-result ul 
{ 
    margin-top: 20px; 
    width: 60em; 

} 

.about-text 
{ 
    margin-top: 1em; 
    margin-bottom: 1em; 
} 

Tutto sta funzionando bene, ma ci stiamo chiedendo specificamente circa le incongruenze tra i valori margin-top. Uno è 20px e l'altro è 1em.

Qual è il migliore in cui andare? Quali sono i punti che dovrei considerare al momento di decidere quale usare? Grazie.

Answer 1

em unità vengono utilizzate per una migliore scalabilità della pagina quando la dimensione degli elementi dipende dalla scala della pagina. È particolarmente importante per i vecchi browser (ad es. IE6) e le piattaforme mobili.

px unità vengono utilizzate per i valori assoluti, mentre em è relativa alla dimensione del carattere dell'elemento particolare. 1em indica una riga di carattere, ad es. si dispone di una scatola con font-size 12px che significa che 1em sarà pari a 12px

Inoltre, utilizzando px sembra più facile, perché si conosce il valore esatto, ma em unità eredita il valore del loro contenitore.

<p>Text</p> 
<div class="box"> 
    <p>Lorem</p> 
</div> 

p { 
    font-size: 1.2em; 
} 

.box { 
    font-size: 1.2em; 
} 

In questo caso, il primo <p> avranno font-size uguale alla base font-size * 1.2, e la seconda <p> visualizzerà con font-size * 1.2 * 1.2.

Answer 2

Sono semplicemente due diversi modi di misurazione. Em è collegato alla dimensione del font (tradizionalmente, 1em è all'incirca la larghezza della lettera M in un determinato carattere), mentre px è pixel.

Se si costruisce tutto usando em, tutto si ridimensionerà di conseguenza quando l'utente modifica la dimensione del carattere (ad esempio utilizzando il menu Pagina> Dimensione testo di IE). Inoltre, rende più semplice lo work to a vertical rhythm.

I pixel sono migliori quando si desidera creare qualcosa "pixel-perfect". Tieni presente che un pixel CSS non sempre equivale a un pixel dello schermo, principalmente perché i browser e i dispositivi mobili moderni consentono lo zoom. Questo di solito non è un problema, perché l'intera pagina viene ridimensionata di conseguenza.

Qualsiasi cosa tu faccia, assicurati di essere coerente per tutto - rende la vita molto più facile in seguito.

Answer 3

Anche qui è una molto buona in profondità tutorial:

px – em – % – pt – keyword

Answer 4

L'unità EMS è relativo alla dimensione del font corrente nel browser. Quindi, se l'utente aumenta la dimensione del carattere *, o se si modifica la dimensione del carattere di un elemento nel CSS, i margini dovrebbero apparire "corretti" in proporzione al testo.

* (questo cessa di importa se l'utente zooma pagina invece di aumentare la dimensione del testo (come è il default in Firefox e Chrome ora, ed è un'opzione in IE).

Se stai usando un margine per posizionare qualcosa di un numero fisso di pixel lontano da qualcos'altro, quindi dovresti ovviamente attaccare con i pixel.

Answer 5

In questo esempio directory-result ul rappresenta un blocco, una sorta di elenco/menu in cui le dimensioni dei pixel sono piuttosto importanti. Non possiamo sempre fare affidamento su em che definisce la dimensione del testo, perché se abbiamo bisogno di 20px di spazio a causa di qualche immagine di sfondo - beh, abbiamo bisogno di 20px, senza compromessi.

Nota che non è possibile creare e salvare l'immagine, ad esempio 10em di larghezza, quindi non vedo alcun motivo per cui dovrei usare unità diverse su una pagina web. Crea solo confusione e in seguito è molto difficile mantenere il layout.

C'è un posto, però, dove è consigliabile utilizzare em - Sto parlando di blocchi di testo. Sto indovinando nel tuo codice about-text si trova all'interno di un altro testo in cui l'aggiunta del margine superiore/inferiore di 1em (altezza del testo) ha senso. È come in qualsiasi editor di testo (es. Interlinea in MS Word) - il testo appare migliore quando la spaziatura tra le righe è definita moltiplicando l'altezza del testo

Quindi secondo me - ovunque tu abbia a che fare con il design e tu usi le immagini per predefinito misurato in pixel: utilizzare pixels per tutto il padding/margine.

Ovunque si gestisca il testo all'interno di un blocco di testo e si desideri aggiungere una spaziatura uniforme tra i nodi del testo: utilizzare em.