В этом примере:
CSS
h1 { font-size: 2em; }
.smaller { font-size: 0.5em; }
HTML
<h1>Hi, I am a <span class="smaller">toad</span></h1>
Будет ли слово "жаба" быть 0,5 раза 16 пикселей (стандартный размер шрифта браузера) или будет 0,5 раза 2em (размер шрифта h1)?
Он равен вычисляемому значению свойства font-size элемента, на котором он используется. Наследование проходит по дереву документа.
Чтобы ответить на ваш вопрос, это будет в 0,5 раза больше, чем 2em, что, в свою очередь, будет в 2 раза больше, чем вычисленный размер шрифта h1. уф.
Также важно отметить, что если вы используете em для других свойств CSS, например, width или height, результат будет вычисляться из вычисленного font-size любого элемента, к которому вы применяете width или height to и т.д.
В следующей статье описывается использование и контекст элемента em довольно хорошо, на мой взгляд, наряду с некоторыми другими материалами и ресурсами чтения... rem единицы могут также вас заинтересовать.
Вы также можете просмотреть эту скрипту, чтобы увидеть, как она действует немного яснее:
em unit обозначает размер шрифта элемента, за исключением случаев, когда он используется в значении свойства font-size, где он обозначает размер шрифта родительского элемента. В этом смысле в представленном случае контекст является родительским элементом.
В представленном случае размер шрифта слова "жаба", таким образом, равен размеру шрифта родительского элемента h1. Никакое конкретное значение для него не может быть выведено из него по данным.
Когда размер шрифта вычисляется, размер шрифта родительского элемента h1 был вычислен, когда эта конструкция будет рассмотрена; позволяет называть его s. Сначала вычисляется размер шрифта h1, умножая s (размер шрифта родителя) на 2. Затем вычисляется размер шрифта элемента span, умножая его размер шрифта родителей на 0.5, давая s. Теоретически ошибки округления могут приводить к минимальному отклонению в таких процессах, но умножение на 2 и 0,5 можно считать точным в компьютерах.
Это будет .5 раз 2em элемента h1 в контексте.
Чтобы заставить его относиться к 16px, вам нужно сначала установить родительский элемент h1 в размер шрифта 16px.
.wrapper {размер шрифта: 16px;} h1 {font-size: 2em; } .smaller {font-size: 0.5em; }
<div class="wrapper"><h1>Hi, I am a <span class="smaller">toad</span></h1></div>
SO в этом случае
Обратите внимание, что em является относительной мерой из контекста, который номинально основан на высоте символов M в текущем шрифте. Для всех целей h1 имеет размер 32px, а span.smaller имеет размер 16px.
Это зависит от размера пикселя родительского элемента. Если размер пикселя родительского элемента равен 16px
.5em будет равно половине вашего базового пикселя, поэтому он будет 8px и 2em для h1 будет равен 32px.
Все зависит от того, как вы настроили размер пикселя родительского элемента в своем CSS.