Question

请考虑以下 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类占用了奇怪的宽度。有一个正文字体大小16px和容器：58.75em，应该等于940px。但相反，我的宽度为1234px。我得出结论，我的宽度是从.h1-sub字体大小计算的，即1.3125em或21px。

1em值是否可以继承身体字体大小？请注意，.main-headline类没有任何反应。其中font-size也被覆盖。

提前感谢您的帮助。

Answer 1

这一行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/

CSS：em值重写

1 个答案: