11

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

正如你在这个例子中看到的那样，在 div 的顶部和文本之间有一个小空格：http: //jsfiddle.net/8BSzp/

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

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

/亲切的问候

4

7 回答 7

11

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

小提琴

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

于 2013-10-10T08:35:46.670 回答
4

这是因为您没有重置正文的边距。

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

更好地解释here和here。

body{margin:0;}

这是小提琴

于 2013-10-10T07:47:30.523 回答
2 
line-height: 1;

阅读更多。叉子。

于 2013-10-10T07:50:32.660 回答
2

您需要降低行高以更接近 div 内的顶部。默认情况下，div 没有任何填充，所以你需要别的东西。尝试：

line-height: 0.8em;

但是，这会导致多行文本靠得更近。如果您的设计，我不确定这是否会成为问题。但这可能是您最接近 div 顶部的位置。

于 2013-10-10T07:53:32.707 回答
2

如果您确实需要字符的顶部与 div 的顶部相匹配，您可以将 line-height 设置为比 font-size 小一点。

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

在这里看小提琴

我建议不要这样做。如果文本分两行换行，将无法阅读。

于 2013-10-10T08:44:29.617 回答
1

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

这是将重置默认值的 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/

于 2013-10-10T07:53:55.987 回答
1

给这个 CSS

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

body{margin:0}

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

于 2013-10-10T08:37:49.530 回答