垂直对齐顶部不起作用？

Question

＆＃13;

＆＃13;

    #myid{
        border:1px solid black;
    }
    
    #myid code {
        border:1px solid black;
    	font-size: 1.5em;
    	line-height: 3em;
    	vertical-align:top;
    }

＆＃13;

    <main>
    	<p id="myid">trying to understand <code>vertical-align</code> better.</p>
    </main>

＆＃13;

＆＃13;

＆＃13;

为什么代码框没有与周围的p框顶部对齐？

Answer 1

第一个问题是你给代码标签提供了3em的行高，这是不必要的，我编辑了你的代码，见下文

<强> HTML

<main>
    <p id="myid">trying to understand <code>vertical-align</code> better.</p>
</main>

<强> CSS

#myid{
    border:1px solid black;
    padding: 20px;
    line-height: 100%;
}

#myid code {
    border:1px solid black;
    font-size: 1.5em;
    vertical-align:top;
}

这里有一个fiddle

Answer 2

这样做并且有效：

#myid{
    border:1px solid black;
}

添加唯一的css选择器

#myid code {
    border:1px solid black;
    font-size: 1.5em;
    vertical-align:super;
}