CODEWITHSUNDEEP
htmlcss
user2345584
user2345584

Reputation:

How do I get text to align to top of div without any space

How do I get text to align to top of div without any space?

As you can see in this example there is a litle space between the top of div and the text: http://jsfiddle.net/8BSzp/

<div class="test">Text</div>

.test{color:#FFF; background-color:#066; height:200px;}

/Kind Regards

Upvotes: 11

Views: 33431

Answers (7)

Alexandre Lavoie
Alexandre Lavoie

Reputation: 61

If you really need the top of the characters to fit with the top of the div, you can set the line-height a bit smaller than the font-size. 

line-height:12px;
font-size:14px;

See fiddle here

I would advise against this though. If the text wraps on two lines, it will be unreadable.

Upvotes: 2

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

Give this CSS

.test {
color: #FFF;
background-color: #066;
height: 200px;
line-height: 11px;

body{margin:0}

http://jsfiddle.net/8BSzp/4/

Upvotes: 1

Danield
Danield

Reputation: 125651

Just add margin-top: -4px to your class.

FIDDLE

If you were to change the line-height this would effect the line-height thought your text - which is not a desirable result... so using margin-top seems like a better option in your case.

Upvotes: 11

lt.kraken
lt.kraken

Reputation: 1300

It is best to use reset the entire style to defaults so all browsers will have the same mark-up. This is due to the fact that many browsers have different default margins.

Here is the CSS that will reset the defaults.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Source: http://meyerweb.com/eric/tools/css/reset/

Upvotes: 0

oexenhave
oexenhave

Reputation: 191

You need to reduce the line height to get closer to the top inside the div. By default the div doesn't have any padding, so you need something else. Try:

line-height: 0.8em;

However, this will cause multiple lines of text to be closer together. I'm not sure if this will be a problem if your design. But this is probably the closest you get to the top of the div.

Upvotes: 2

Prasanth
Prasanth

Reputation: 5268

line-height: 1;

read more. fork.

Upvotes: 2

codingrose
codingrose

Reputation: 15709

it is because you have not reset margin of body.

by default, every html tag has some styling properties associated. a better option is to reset all properties and then writing own styling code.

better explained here and here.

body{margin:0;}

here is the fiddle

Upvotes: 4

Related Questions