Почему эти 2 дивы не запускается в том же положении

Question

http://jsfiddle.net/y8LhR/1/

<div class="narrow heading">Heading</div> 
<div class="narrow">Description goes here</div> 


.narrow{ 
    margin-left:5em; 
    margin-right:5em; 
} 
.heading{ 
    font-size:36px; 
} 

Почему увеличивающейся шрифт товарной позиции, сдвинув его подальше от левого?

Если я заменю 12 em на 165 px в CSS, то желаемый эффект будет достигнут. Но тогда сайт не будет выглядеть так, как хотелось бы с разными размерами окна.

Answer 1

Вы установили left-margin:5em; 5em в 5 раз больше размера шрифта, так как размер шрифта на .heading больше, left-margin больше.

больше информации here

EDIT

Если вы хотите, отзывчивый запас, вам нужно использовать в процентах

Answer 2

em кратно текущего размера шрифта элемента. Поскольку .heading имеет больший шрифт, он будет иметь больше разницы.

Если вы не хотите, чтобы размер поля варьировался в зависимости от размера шрифта, попробуйте вместо этого использовать px (пиксели) или, возможно, rem (кратные шрифту корневого элемента).

Answer 3

em не является абсолютной единицей - это единица, которая относится к выбранному в данный момент размеру шрифта.

Ваша маржа меняется в зависимости от размера шрифта, поэтому heading маржа отличается.

Вы можете найти здесь (ИМХО) некоторые очень хорошая информация: Why EM instead of PX

Answer 4

Из Adobe Glossary

Em традиционно определяется как ширина верхнего регистра M в текущем размере и номинальной точки. Он более точно определяется как просто текущий размер точки. Например, в 12-ти точечном типе em - это расстояние 12 баллов.

Вы увидите, что если вы меняете em с абсолютной мерой, как px, вы достигнете результата.