Search code examples
htmlcssalignmentvertical-alignmenttext-alignment

Text will not align to top of div

I've tried vertical-align, margin-top, top, padding, positioning, and any trick I can think of, but I cannot get my text to the top of my div, under any circumstance. I've never run into this before, so I feel like I am overlooking something dumb...

The important stuff:

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

I've stripped from my code all attempts to push the text to the top of those divs, as none of them worked. However, I did try everything I could find. I want the "row20" div to function as an alignment for my forms. If I use br, it tends to make it harder to have the text boxes line up to the text. For some reason, the p text is showing up about 18px down from the top of the parent div. Nothing I have done has changed that...

Solution

  • Your inner p element overflows the div container because it has top and bottom default margins, so you should remove it to fit your needs :

    p.gray1 { margin:0; }

    JSFiddle