html - 垂直增加两条线之间的间距

Question

我有如下的纯 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

知道怎么做吗？

---

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

Answer 1

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

例如 ：

div {line-height:25px;} 

Answer 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>

Answer 3

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

CSS：

p {
    margin-top: 10px;
}

或者，如果您希望所有行距在相同段落中都不同，请使用line heighton 。div

分区：

div {
    line-height: 10px;
}  

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

Answer 4

做这样的事情

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}

Answer 5

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

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

小提琴

否则 - line-height 是其他答案所述的方法。

Answer 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>