Html 如何让文本在没有任何空格的情况下与 div 顶部对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19289880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get text to align to top of div without any space
提问by
How do I get text to align to top of div without any space?
如何让文本在没有任何空格的情况下与 div 顶部对齐？
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 顶部和文本之间有一点空间：http: //jsfiddle.net/8BSzp/
<div class="test">Text</div>
.test{color:#FFF; background-color:#066; height:200px;}
/Kind Regards
/亲切的问候
采纳答案by Danield
Just add margin-top: -4pxto your class.
只需添加margin-top: -4px到您的班级。
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.
如果您要更改行高，这会影响您的文本的行高 - 这不是一个理想的结果......所以在您的情况下使用 margin-top 似乎是一个更好的选择。
回答by Hiral
it is because you have not reset margin of body.
那是因为你没有重置 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.
默认情况下，每个 html 标签都有一些关联的样式属性。更好的选择是重置所有属性，然后编写自己的样式代码。
better explained hereand here.
body{margin:0;}
回答by oexenhave
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:
您需要降低行高以更接近 div 内的顶部。默认情况下，div 没有任何填充，因此您需要其他东西。尝试：
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.
但是，这会导致多行文本靠得更近。如果您的设计，我不确定这是否会成为问题。但这可能是您最接近 div 顶部的地方。
回答by Alexandre Lavoie
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.
如果您确实需要字符的顶部与 div 的顶部相匹配，则可以将行高设置为比字体大小小一点。
line-height:12px;
font-size:14px;
I would advise against this though. If the text wraps on two lines, it will be unreadable.
不过我建议不要这样做。如果文本在两行上换行，它将无法阅读。
回答by Dinesh Kanivu
Give this CSS
给这个 CSS
.test {
color: #FFF;
background-color: #066;
height: 200px;
line-height: 11px;
body{margin:0}
回答by larssy1
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.
这是将重置默认值的 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;
}
