垂直对齐的顶部不起作用? [英] Vertical-align top not working?

问题描述

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

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

为什么代码框未与周围的p框顶部对齐?

Why does the code box not align to the top of the surrounding p box?

推荐答案

第一个问题是您给代码标签赋予了3em的行高，这是不必要的，我已经编辑了您的代码，请参见下文

The first problem is that you have given line-height of 3em to code tag, that is unnecessary, i have edited your code, see below

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;
}

这是您的小提琴

这篇关于垂直对齐的顶部不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！