Question

如何在没有任何空格的情况下将文本对齐到div的顶部？

正如您在本示例中所看到的，在div的顶部和文本之间有一个小窗口：http://jsfiddle.net/8BSzp/

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

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

/亲切的问候

Answer 1

只需将margin-top: -4px添加到您的班级。

<强> FIDDLE

如果您要更改行高，这会影响行高 - 您的文本 - 这不是理想的结果......所以在您的情况下使用margin-top似乎是更好的选择。

Answer 2

这是因为你没有重置身体边缘。

默认情况下，每个html标记都有一些关联的样式属性。一个更好的选择是重置所有属性，然后编写自己的样式代码。

更好地解释了here和here。

body{margin:0;}

here is the fiddle

Answer 3

line-height: 1;

read more。 fork

Answer 4

您需要降低线条高度以接近div内部的顶部。默认情况下，div没有任何填充，因此您需要其他内容。尝试：

line-height: 0.8em;

但是，这会导致多行文本更加紧密。如果你的设计，我不确定这是否会成为一个问题。但这可能是你最接近div顶部的。

Answer 5

如果您确实需要字符顶部与div的顶部相匹配，则可以将行高设置为小于字体大小。

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

See fiddle here

我会建议不要这样做。如果文本包含两行，则将无法读取。

Answer 6

最好将整个样式重置为默认值，以便所有浏览器都具有相同的标记。这是因为许多浏览器具有不同的默认边距。

这是将重置默认值的CSS。

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

来源：http://meyerweb.com/eric/tools/css/reset/

Answer 7

提供此CSS

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

body{margin:0}

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

如何在没有任何空格的情况下将文本对齐到div的顶部

7 个答案:

来源：http://meyerweb.com/eric/tools/css/reset/