puis-je utiliser em et rem pour des choses autres que la taille de la police? [dupliquer]

Nov 20 2020

Pour récapituler, l'unité em signifie "la taille de la police de mon élément parent" dans le cas de la typographie. Les <li>éléments à l'intérieur du <ul>avec une classe de ems prennent leur dimensionnement de leur parent. Ainsi, chaque niveau successif d'imbrication devient progressivement plus grand, car chacun a sa taille de police définie sur 1,3em - 1,3 fois la taille de police de son parent.

Pour récapituler, l'unité rem signifie "La taille de la police de l'élément racine". (rem signifie "root em".) Les <li>éléments à l'intérieur du <ul>avec une classe de rems prennent leur dimensionnement de l'élément racine ( <html>). Cela signifie que chaque niveau successif d'imbrication ne cesse d'augmenter.

C'est l'explication fournie par Mozilla.

Je peux voir qu'à ma place du code des autres, ils l'ont fait padding: 1.5rem. Cela signifie que remet emne sont pas du tout couplés à la taille de la police. Est-ce correct ?

Question 1) Donc, si je mets padding:1.5remsur un élément, quelle taille aura-t-il? que regarde-t-il pour pouvoir déterminer sa propre taille de rembourrage?

Question 2) Et qu'en est-il padding:1.5em?

Réponses

3 symlink Nov 20 2020 at 01:14

Oui, vous pouvez utiliser em et rem pour n'importe quelle mesure de longueur.

Question 1) Donc, si je mets padding: 1.5rem sur un élément, quelle taille aura-t-il? que regarde-t-il pour pouvoir déterminer sa propre taille de rembourrage?

Si le remplissage d'un élément est de 1,5rem, il aura une longueur de remplissage de 1,5 fois la taille de la police de l'élément html. Dans l'exemple ci-dessous, la boîte extérieure a un rembourrage de 1,5x ou 15px, et la boîte intérieure est de 2x ou 20px.

html{
  font-size: 10px;
}

.p,.c{
  border: solid 1px #f00;
}

.p{
  padding: 1.5rem;
}

.c{
  padding: 2rem;
}

<div class='p'>
  <div class='c'></div>
</div>

Question 2) Qu'en est-il du rembourrage: 1,5em?

Un élément avec un remplissage de 1,5em prendra 1,5 fois la taille de police du parent le plus proche (y compris soi-même) avec une taille de police définie. Donc, si vous définissez la taille de la police de la boîte extérieure de l'exemple précédent à 8px, elle aura 1,5x ou 12px de remplissage, et l'élément interne aura un remplissage de 2x ou 16px.

html {
  font-size: 10px;
}

.p,
.c {
  border: solid 1px #f00;
}

.p {
  font-size: 8px;
  padding: 1.5em;
}

.c {
  padding: 2em;
}

<div class='p'>
  <div class='c'></div>
</div>

2 Amanshivhare1 Nov 20 2020 at 01:24

Réponse 1: Donc, si vous définissez padding:1.5rem, cela prendra la taille en fonction de la taille de la police racine du HTML racine qui est de 24 pixels. (1rem est 16px par défaut)

Il définira en outre l'espace de remplissage en fonction de la valeur donnée et le multipliera par la taille de la police de l'élément racine (HTML).

Answer2: Et cela cause la même chose avec em , il multipliera la valeur de em en fonction de la taille de police donnée. Par défaut, il est de 12px pour 1em. Donc, si vous le définissez, paddind:1.5emcela ajoutera un espace de remplissage de 16 px.