Kann ich em und rem für andere Zwecke als die Schriftgröße verwenden? [Duplikat]

Nov 20 2020

Zusammenfassend bedeutet die em-Einheit bei Typografie "Schriftgröße meines übergeordneten Elements". Die <li>Elemente in der <ul>mit einer Klasse von ems beziehen ihre Größe von ihren Eltern. Daher wird jede verschachtelte Verschachtelungsebene zunehmend größer, da für jede Schriftart die Schriftgröße 1,3em - das 1,3-fache der Schriftgröße der Eltern festgelegt ist.

Zusammenfassend bedeutet die rem-Einheit "Die Schriftgröße des Stammelements". (rem steht für "root em".) Die <li>Elemente in der <ul>mit einer Klasse von rems beziehen ihre Größe aus dem root-Element ( <html>). Dies bedeutet, dass nicht jede aufeinanderfolgende Verschachtelungsebene größer wird.

Dies ist die Erklärung, die Mozilla liefert.

Ich kann sehen, dass sie an meinen Stellen den Code anderer Leute haben padding: 1.5rem. Dies bedeutet, dass remund emüberhaupt nicht an die Schriftgröße gekoppelt sind. Ist das richtig ?

Frage 1)padding:1.5rem Welche Größe hat ein Element , wenn ich es festlege ? Was sieht es aus, damit es seine eigene Polstergröße herausfinden kann?

Frage 2) Was ist mit padding:1.5em?

Antworten

3 symlink Nov 20 2020 at 01:14

Ja, Sie können em und rem für jedes Längenmaß verwenden.

Frage 1) Wenn ich also die Auffüllung für ein Element auf 1.5rem setze, welche Größe hat es? Was sieht es aus, damit es seine eigene Polstergröße herausfinden kann?

Wenn das Auffüllen eines Elements 1,5 Rem beträgt, hat es eine Auffülllänge, die das 1,5-fache der Schriftgröße des HTML-Elements beträgt. Im folgenden Beispiel hat die äußere Box eine Polsterung von 1,5x oder 15px und die innere Box ist 2x oder 20px groß.

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>

Frage 2) Was ist mit Polsterung: 1.5em?

Ein Element mit 1.5em-Auffüllung nimmt das 1,5-fache der Schriftgröße des nächsten übergeordneten Elements (einschließlich self) mit einer festgelegten Schriftgröße an. Wenn Sie also die Schriftgröße des äußeren Felds aus dem vorherigen Beispiel auf 8 Pixel einstellen, wird es mit 1,5 oder 12 Pixel aufgefüllt, und das innere Element wird mit 2 oder 16 Pixel aufgefüllt.

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

Antwort 1: Wenn Sie also festlegen padding:1.5rem, wird die Größe entsprechend der Root-Schriftgröße des Root-HTML-Codes von 24 Pixel angenommen. (1rem ist standardmäßig 16px)

Außerdem wird der Auffüllbereich entsprechend dem angegebenen Wert festgelegt und mit der Schriftgröße des Stammelements (HTML) multipliziert.

Antwort 2: Und es verursacht dasselbe mit em , es multipliziert den Wert des em entsprechend der angegebenen Schriftgröße. Standardmäßig ist es 12px für 1em. Wenn Sie also festlegen paddind:1.5em, wird ein Auffüllbereich von 16 Pixel hinzugefügt.