文字将无法与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容器，因为它具有顶部和底部的默认margins ，因此应根据需要将其删除：

p.gray1 { margin:0; }

的jsfiddle

Answer 2

您在row20有高度，因此在对齐时遇到困难，请使用line-height：

p.gray1{
   font-size: 14px;
   color: #444444;
   line-height: 20px;/*or something that fits your align*/
   margin: 0;/*remove default margins*/
   padding: 0;
}

 #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; margin: 0; padding: 0; line-height: 20px; } 

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

Answer 3

如果您想知道如何解决这些问题，最好尝试在firefox中使用firebug扩展，然后再尝试代码，也可以更改值并立即查看结果，因此不会再感到困惑。