CSS: значение em имеет приоритет

Пожалуйста, рассмотрите следующий код CSS:

body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: normal;
} 

.main-headline {
font-family: 'Open Sans', sans-serif;
font-size: 3.1875em;
font-weight: 700;
text-align: center;
margin-bottom: 0em;
margin-top: 5em;
}

.h1-sub {
font-family: 'Open Sans', sans-serif;
font-size: 1.3125em;
font-weight: 400;
text-align: center;
margin-top: 0.3125em;

.container_12 .grid_12 {
width:58.75em;
}

И HTML:

<header class="container_12 grid_12 alpha omega">
    <div class="grid_12 alpha omega">
        <hgroup>
                <h1 class="main-headline">Some text</h1>

            <p class="h1-sub grid_12 alpha omega">Some text</p>
        </hgroup>
    </div>
</header>

Проблема в том, что класс .h1-sub имеет странную ширину. Есть размер шрифта body 16px и container: 58.75em, что должно быть равно 940px. Но вместо этого я получаю 1234px в ширину. Я сделал вывод, что моя ширина вычисляется из .h1-sub размера шрифта, который составляет 1,3125 em или 21px.

Может ли значение 1em наследоваться не только от размера шрифта тела? Обратите внимание, что ничего не произошло с классом .main-headline, где размер шрифта также был переопределен.

Спасибо за помощь заранее.


css em
person pan1cmode    schedule 30.08.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Эта строка CSS:

.container_12 .grid_12 { width:58.75em; }

Пытается выбрать что-либо с классом .grid_12 внутри .container_12. Таким образом, мы пытаемся присвоить ширину тегу p. Если это не то, что вы пытаетесь сделать, вам нужно просто объявить:

.container_12 { width:58.75em; }

Также вы забыли закрыть .h1_sub стилей с помощью } в конце:

.h1-sub {
font-family: 'Open Sans', sans-serif;
font-size: 1.3125em;
font-weight: 400;
text-align: center;
margin-top: 0.3125em; }

Вот рабочая скрипка: http://jsfiddle.net/B893S/

person CaribouCode    schedule 30.08.2013
comment
Спасибо! Все работает сейчас. Я только что удалил .grid_12 alpha omega из ‹header› и из .h1-sub. - person pan1cmode; 30.08.2013