html - 文本不会与 div 顶部对齐

Question

我尝试过垂直对齐、顶部边距、顶部、填充、定位以及任何我能想到的技巧，但在任何情况下我都无法将文本放置在 div 的顶部。我以前从未遇到过这种情况，所以我觉得我忽略了一些愚蠢的事情......

重要的事情:

HTML

        <div id="login">
            <div class="row20">
                <p class="gray1">username</p>
            </div>
            <div class="row20">
                <p class="gray1">password</p>
            </div>
            <div class="row20">
                <p class="gray1">new here? | forgot password?</p>
            </div>
        </div>

CSS

 #login {
    position: absolute;
    border: 1px solid #ccc;
    height: 73px;
    width: 260px;
    left: 620px;
    top: 3px;
    vertical-align: top;
    padding: 0px;
    margin-top: 0px;
}
div.row20 {
    height: 20px;
    border: 1px solid #cccccc;
}
p.gray1 {
    font-size: 14px;
    color: #444444;
}

我已经从我的代码中删除了所有将文本推送到这些 div 顶部的尝试，因为它们都不起作用。然而，我确实尝试了我能找到的一切。我希望“row20”div 能够作为我的表单的对齐方式。如果我使用 br，它往往会使文本框与文本对齐变得更加困难。由于某种原因，p 文本显示在距父 div 顶部约 18px 的位置。我所做的一切都没有改变......

Answer 1

您的内部 p 元素会溢出 div 容器，因为它具有顶部和底部默认的 margin，因此您应该将其删除以满足您的需求:

p.gray1 { margin:0; }

JSFiddle