Html 减少文本行之间的空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5267236/
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
Reduce white space between lines of text
提问by user654466
I am creating a webpage (first time) and i'm following as much of the CSS rules and tags as I can. However, I ran into a problem with white space. I've underlined the first line of text but now the second line seems to have drifted below. Is there a way to make it a bit more snug, i'd like the second line of text to be just below the above line.
我正在创建一个网页（第一次）并且我正在尽可能多地遵循 CSS 规则和标签。但是，我遇到了空白的问题。我在第一行文字下划线，但现在第二行似乎已经漂移到下面了。有没有办法让它更舒服一点，我希望第二行文字正好在上面一行的下方。
body,td,th {
color: #000000;
}
body {
margin: 0;
padding: 0;
padding-top: 6px;
text-align: center;
background-color: #FFFFFF;
}
#centered
{
width: 800px; /* set to desired width in px or percent */
text-align: left; /* optionally you could use "justified" */
border: 0px; /* Changing this value will add lines around the centered area */
padding: 0;
margin: 0 auto;
}
.style3 {
font-size: 32pt;
color: #666666;
margin-left: 0px;
border-bottom: 3px double;
}
.style5 {
margin-left: 390px;
font-size: 32pt;
color: #CCCCCC;
}
-->
</style></head>
<div id="centered">
<body>
<p class="style3"> FIRST LINE OF TEXT</p>
<p class="style5">INDENTED SECOND LINE</p>
</body>
</div>
</body>
</html>
回答by riwalk
p.style3, p.style5 {
margin-top: 2px;
margin-bottom: 2px;
}
Play with those two values until you are happy with the result :)
使用这两个值直到您对结果满意为止:)
回答by melhosseiny
You need to adjust the line-height. More specifically, add the following declaration:
您需要调整line-height. 更具体地说，添加以下声明：
.style5 {
line-height: 0.72em;
}
If you only want the first line of .style5to be snug, you need to adjust the top margin. Use this declaration instead:
如果您只希望第一行.style5紧贴，则需要调整上边距。请改用此声明：
.style5 {
margin-top: -10px;
}
See fiddle.
见小提琴。
Note:You should always validate your markup using the W3C Markup Validation Serviceand your css using the W3C CSS Validation Service. It will help you a lot when you're starting out.
注意：您应该始终使用W3C 标记验证服务验证您的标记，并使用W3C CSS 验证服务验证您的 css 。当你开始的时候，它会帮助你很多。
回答by OCDev
Have you tried the CSS line-height rule?
http://www.w3schools.com/css/pr_dim_line-height.asp
您是否尝试过 CSS 行高规则？
http://www.w3schools.com/css/pr_dim_line-height.asp
回答by Gergely Fehérvári
hmm. your code little buggy. first i see that you have div OUTSIDEof body tag.
唔。你的代码有点问题。首先我看到你有DIV OUTSIDEbody标签。
try to validate your code.
尝试验证您的代码。
anyway you can change the space weebven lines in the same paragraph with : p {line-height:0.7em}this creates a 7/10 line height of the font size.
无论如何，您可以使用以下命令更改同一段落中的空格 weebven 行：p {line-height:0.7em}这会创建字体大小的 7/10 行高。
if you want to decrease space between paragrapsh you shold change the margin|padding of the paragraphs. p{margin:0 91px 0 37px;padding:0 43px 0 19px}
如果你想减少段落之间的空间，你应该改变段落的边距|填充。 p{margin:0 91px 0 37px;padding:0 43px 0 19px}
