Dois-je définir les marges CSS en pixels ou en ems? Pourquoi? Quand?

Question

Nous avons un fichier CSS avec des règles similaires à ce qui suit:

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

} 

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

Tout fonctionne bien, mais nous nous demandons en particulier sur les contradictions entre les valeurs margin-top. L'un est 20px et l'autre est 1em.

Quel est le meilleur pour aller avec? Quels sont les points que je devrais considérer pour décider lequel utiliser? Merci.

Answer 1

em Les unités sont utilisées pour améliorer l'évolutivité de la page lorsque la taille des éléments dépend de l'échelle de la page. Cela est particulièrement important pour les anciens navigateurs (par exemple IE6) et les plates-formes mobiles.

px Les unités sont utilisées pour les valeurs absolues, tandis que em est relative à la taille de la police de l'élément particulier. 1em signifie une ligne de police, par ex. vous avez une boîte avec la taille de la police 12px cela signifie que 1em sera égal à 12px

Aussi, en utilisant px semble plus facile parce que vous connaissez la valeur exacte, mais em unités héritez la valeur de leur conteneur. Dans ce cas

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

p { 
    font-size: 1.2em; 
} 

.box { 
    font-size: 1.2em; 
} 

, le premier <p> aura la taille de police égale à la base font-size * 1.2, et la seconde <p> affichera avec la taille de la police * 1.2 * 1.2.

Answer 2

Il s'agit simplement de deux façons différentes de mesurer. Em est lié à la taille de la police (traditionnellement, 1em correspond à peu près à la largeur de la lettre M dans une police de caractères donnée), alors que px est un pixel.

Si vous créez tout en utilisant em, tout évoluera en conséquence lorsque l'utilisateur ajuste sa taille de police (par exemple en utilisant le menu Page> Taille du texte d'IE). Il est également plus facile de work to a vertical rhythm.

Les pixels sont meilleurs quand vous voulez construire quelque chose de "pixel-parfait". Sachez qu'un pixel CSS ne correspond pas toujours à un pixel d'écran - principalement parce que les navigateurs modernes et les appareils mobiles permettent le zoom. Ce n'est généralement pas un problème car la page entière est mise à l'échelle en conséquence. Quoi que vous fassiez, assurez-vous que vous êtes cohérent tout au long de - cela rend la vie beaucoup plus facile par la suite.

Answer 3

également ici est un très bon tutoriel en profondeur:

px – em – % – pt – keyword

Answer 4

L'unité est ems par rapport à la taille de police dans le navigateur. Ainsi, si l'utilisateur augmente la taille de la police *, ou si vous modifiez la taille de la police d'un élément dans la feuille de style CSS, les marges doivent toujours avoir l'aspect "correct" proportionnellement au texte.

* (Ce prélèvement cesse d'importance si l'utilisateur effectue un zoom avant la page au lieu d'augmenter la taille du texte (comme la valeur par défaut dans Firefox et Chrome maintenant, et est une option dans IE).

Si vous utilisez une marge pour positionner quelque chose d'un certain nombre de pixels à partir de quelque chose d'autre, alors vous devez évidemment rester avec des pixels.

Answer 5

Dans cet exemple directory-result ul représente un bloc - une sorte de liste/menu où les dimensions en pixels sont très importantes. Nous ne pouvons pas toujours compter sur em qui définit la taille du texte, car si nous avons besoin de 20px d'espace en raison d'une image de fond - eh bien, nous avons besoin de 20px, pas de compromis.

Notez que vous ne pouvez pas créer et enregistrer l'image, c'est-à-dire 10em de large, donc je ne vois aucune raison pour laquelle je devrais utiliser des unités différentes sur une page Web. Cela crée simplement de la confusion et plus tard il est très difficile de maintenir la disposition.

Il y a un endroit cependant, où l'utilisation em est conseillée - je parle des blocs de texte. Je devine dans votre code about-text est placé dans l'autre texte où l'addition de marge supérieure/inférieure de 1em (taille du texte) a un sens. C'est comme dans n'importe quel éditeur de texte (espacement des lignes dans MS Word) - le texte est le meilleur quand l'espacement entre les lignes est défini en multipliant la hauteur du texte

Donc, à mon avis - partout où vous travaillez avec le design et vous utilisez des images par par défaut mesuré en pixels - utilisez pixels pour tous les bourrelets/marges.

Partout où vous manipulez du texte dans un bloc de texte et souhaitez ajouter un espacement uniforme entre les nœuds de texte, utilisez em.