Почему 1em не основан на 16px? - PullRequest
0 голосов
/ 11 июня 2018

У меня возникла серьезная проблема с пониманием кода:

<!DOCTYPE html>
<html>
<head>
<style>

body{
    font-size:16px;
}
p {
    margin: 0 0 1em 0;
    font-size: 2em;
    line-height: 1em;

}
</style>
</head>
<body>

<p>Sample Text</p>


</body>
</html>

Я понимаю, что размер шрифта теперь составляет 32 пикселя, потому что я поставил 2em, который будет в два раза больше 16, но почему поле-нижняя часть и строкавысота 32 пикселя, хотя его 1em?

Ответы [ 2 ]

0 голосов
/ 11 июня 2018

Поскольку вы используете em в качестве единицы размера шрифта, он относится к непосредственному родителю или тому же элементу, для которого объявлен размер шрифта.Здесь ваш <p> имеет размер шрифта 2em (это означает, что 32px). Таким образом, высота строки и поле теперь рассматривают как 32px в качестве базового значения, и em рассчитывает на основе этого нового значения.

Но если вы используетеВ качестве единицы измерения rem всегда будет принимать размер шрифта body / html.

0 голосов
/ 11 июня 2018

В вашем случае вы должны использовать rem вместо em.

Взгляните здесь .

em относительно шрифта-size его ближайшего родителя, в то время как rem относится к корневому размеру шрифта.

Я хотел бы думать, что "r" из rem как "root em".И корень означает html, а не body элемент.

console.log("padding of div em  : " + window.getComputedStyle(em).padding);
console.log("padding of div rem : " + window.getComputedStyle(rem).padding);
html {
  font-size: 10px;
}
div.parent {
  font-size: 20px;
}
div.child {
  border: 1px solid black;
  margin: 5px;
}
#em {
  padding: 1em;
}
#rem {
  padding: 1rem;
}
<div class="parent">
  <div id="em" class="child">1em</div>
  <div id="rem" class="child">1rem</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...