垂直增加两条线之间的间距答案

【问题标题】：increase spacing vertically between two lines垂直增加两条线之间的间距
【发布时间】：2017-01-06 13:59:02
【问题描述】：

我有如下纯html文件

<div>
    THis is a looooooooong text. and it goes on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on 
    <br/><br/>
    2nd line
    <br/><br/>
    3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 
    <br/><br/>
    last line
</div>

我想要的是增加两行之间的间距

现在我看到如下文字。

但我想要的是增加两行之间的间距，比如说 10px。

jsfiddle

知道怎么做吗？

如下图所示，需要带上空间。（例如我只考虑了第一行）

【问题讨论】：

行高是不错的选择，请看我的回答

标签： html css

【解决方案1】：

使用行高在行之间添加空格：

例如：

div {line-height:25px;}

【讨论】：

【解决方案2】：

包含以下 css 以根据您的要求提供行高：

<style>
.small {line-height:10px;}
.big {line-height:200px;}
</style>
<div class="big">
    THis is a looooooooong text. and it goes on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on 
    <br/><br/>
    2nd line
    <br/><br/>
    3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 
    <br/><br/>
    last line
</div>

【讨论】：

【解决方案3】：

做这样的事

HTML

<div>
    <p>THis is a looooooooong text. and it goes on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on </p>
    <p>2nd line</p>
    <p>3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 3rd line </p>    
    <p>last line</p>
</div>

CSS

p{margin-bottom:10px}

【讨论】：

阅读编辑后，行高是一个不错的选择。但是在这种情况下最好使用
标签而不是
。

【解决方案4】：

如果您只想设置 br 元素的 line-height 样式 - 就没有了。（信不信由你）

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 3em !important;
}

FIDDLE

否则 - 正如其他答案所述，行高是要走的路。

【讨论】：

【解决方案5】：

不要使用换行符，而是使用段落并给它们留出边距。

CSS：

p {
    margin-top: 10px;
}

如果您希望即使在相同段落中的所有行间距都不同，也可以在div 上使用line height。

DIV：

div {
    line-height: 10px;
}

JSFiddle：http://jsfiddle.net/p6ywG/

【讨论】：

【解决方案6】：

谢谢，我们可以使用 .

在 Text 和 Hoverbar 之间添加空格。

.homonhov:hover {
    border-bottom: 3px solid #FFFFFF !important; /*This will create a bar below it*/
    text-decoration: none !important; 
    position: relative !important;

 <a class="homonhov" href="index.php" style="line-height:35px;">HOME</a>

【讨论】：