Question

I am trying to build a simple div with a span of text inside of it.

    <div id="bottom-text">
        <span>ONE STOP</span>
    </div>

And here is the simple CSS styling I have in effect for “#bottom-text”:

    #bottom-text{
        font-weight:700;
        font-size:50px;
        text-align:center;
        margin:auto;
        position:relative;
        padding-top:25px;
        height:65px;
        width:auto;
    }

For some reason, the text “ONE STOP” displays partially outside of #bottom-text. (only the top portion of all the letters…) I’ve tried using padding to fix it but the text then overflows partially into the padding region!

Can anyone help me figure out why this text is displaying outside the div it is supposed to be contained within? (I’ve been testing Chrome and Firefox)

Thanks all.

Answer 1

look at your code, the #bottom-text is 65px height, the font-size is 50px, and padding-top is 25px

65-(50+25) = -10
So you will see only the top 10 pixel of your text.

Set padding-top to a lesser amount, and play with just so it is correct