使用em时,元素的样式不会覆盖继承的font-size

Question

我正在尝试设置父母font-size:0和孩子的font-size:10em.我这样做是为了消除内嵌块之间的烦人空间.

代码示例:

div.bully {
    font-size:0em;
}

div.geek {
    display:inline-block;
    font-size:10em;
}

<div class="bully">
    <div class="geek">Something wise</div>
    <div class="geek">Something wiser</div>
</div>

小提琴:http://jsfiddle.net/r3rc0t1d/

它不起作用,由于某种原因,孩子的风格不会覆盖父母的风格.我在Chrome,Firefox和IE中测试过它.但是,如果我将其更改为px(http://jsfiddle.net/r3rc0t1d/1/),它会起作用.有什么理由em不起作用但px有效吗？

Answer 1

使用时em,您的字体大小将始终相对于父级的字体大小.因此,如果您要将父级0em的字体大小设置为10em,并将子级的字体大小设置为,则告诉该框应用字体大小为

10 * 0em = 0em