CSS How to make text align background-color top line

Question

CSS How to make text align the background-color top line http://jsfiddle.net/5xR8V/
(padding-top : - px not working)

<div class="a">
 texttext
</div>

.a{
position: absolute;
top:100px;
width: 200px;
height: 19px;
background: #000000;
font-size: 20px;
color: #FFFFFF;
}

By the way OP, negative padding is not supported in CSS: http://stackoverflow.com/a/4974113/805556. — LonelyWebCrawler, Aug 24 '12 at 00:49

score 3 · Accepted Answer · answered Aug 24 '12 at 00:51

If you want it to be at the top, but still have space at the bottom:

line-height:19px;
padding-bottom:2px;

or just the line-height if you want the background colour to be the same height as the letters. 19px will allow for capital letters - if you want it to be just lower case, you could make it smaller, maybe 13px.

score 1 · Answer 2 · answered Aug 24 '12 at 00:52

1

Is this what you're talking about?

http://jsfiddle.net/5xR8V/

line-height:19px

answered Aug 24 '12 at 00:52

mittmemo

2,062
3
20
27

score 0 · Answer 3 · answered Aug 24 '12 at 00:54

0

By setting the line-height, you can move the text to the very top of the background.

line-height:13px;

answered Aug 24 '12 at 00:54

JCOC611

19,111
14
69
90

score 0 · Answer 4 · answered Aug 24 '12 at 00:56

text align in CSS can have values of left, right and center. I guess you're speaking of vertical aligning or vertical filling with colors, then it's a bit weird to read "text align" in this context. ;)

Here's a fiddle : http://jsfiddle.net/PhilippeVay/5xR8V/2/ with less horizontal lines being completely black with no text. Is this what you're trying to achieve?

Beware: this is highly dependant of the font used. By default it's serif (Times or Times New Roman most of the times except on Linux I believe), values WILL change with Arial, Verdana, Helvetica, etc

CSS How to make text align background-color top line

4 Answers4