Типография: быстрый вопрос об ЭМ - PullRequest
Новая
       47

Типография: быстрый вопрос об ЭМ

2 голосов
/ 23 мая 2011

Допустим, у меня есть следующий код: 

<html>
  <body>
    <header>
      <h1>
        Hello World
      </h1>
    </header>
  </body>
</html>

body{
  // make 1em equivalent to 10px when browser default is 16px 
  font-size: 62.5%;
}

header{
  font-size: 1em;
}

header h1{
  font-size: 3em;
  margin-bottom: 1em;
}

Если размер шрифта в браузере по умолчанию равен 16px, то h1 будет 30px. Я надеялся, что поле ниже моего h1 будет 33% от размера шрифта, но по какой-то причине это также 30px. Так же, как размер шрифта. Я четко указываю, что это должно быть 1em.

Я понимаю, что они относятся к родительскому контейнеру. Находятся ли поля относительно текущего элемента? то есть, если размер шрифта h1 установлен на 4em (40px), то поле 1em также автоматически становится равным 40px? Это ожидаемое поведение? Должен ли я сказать margin-bottom: 0.33em.

Впервые используя em.

Ответы [ 2 ]

1 голос
/ 23 мая 2011

Вы согласны с тем, что 1em равен текущему размеру шрифта . Так что, если бы у нас было это: 

<header style="font-size:10px;">
<h1 style="font-size:2em; padding:1em;">
Hellow World
</h1>
<p style="padding:1em;">
The world is a happy place
</p>
</header>

Заполнение для h1 будет 20px, а отступ для p будет 10px.

Если вы новичок в ems, я только что вспомнил эту статью, в которой настоятельно рекомендую рассказать о создании веб-страниц с использованием ems: Fluid Grids

0 голосов
/ 14 сентября 2011

Я понимаю, что они относятся к родительскому контейнеру

Нет.em относительно текущего размера шрифтаТаким образом, определение размера шрифта в ems является круглым.Говоря типографски, вы должны определить размеры шрифта в точках, , а не в пикселях, затем получите независимость от разрешения, а затем задайте поля, ширину и отступы & c в ems.

...