0

次の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 font-size 16px と container: 58.75em があり、これは 940px に等しいはずです。しかし、代わりに幅が 1234px になります。私の幅.h1-subは、1.3125em または 21px の font-size から計算されるという結論に達しました。

1em 値は body font-size だけでなく継承できますか? font-size もオーバーライドされている .main-headline クラスには何も起こらなかったことに注意してください。

事前に助けてくれてありがとう。

4

1 に答える 1

0

この CSS の行:

.container_12 .grid_12 { width:58.75em; }

.grid_12insideのクラスを持つものを選択しようとしています.container_12。したがって、これは p タグに幅を与えようとしています。それがあなたがしようとしていることではない場合は、次のように宣言する必要があります。

.container_12 { width:58.75em; }

また、末尾.h1_subに a を付けてスタイルを閉じるのを忘れていました:}

.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/

于 2013-08-30T09:11:42.780 に答える