Html 增加两行之间的垂直间距

increase spacing vertically between two lines

提问by Fahim Parkar

I have plain html file as below

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

What I want is increase the spacing between two lines

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

Right now I see text as below.

现在我看到的文字如下。

But what I want is increase the spacing between two lines by lets say 10px.

但我想要的是将两行之间的间距增加 10px。

jsfiddle

提琴手

Any idea how to do that?

知道怎么做吗？

---

---

Space need to be brought as shown in below image. (for example i have considered only first line)

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

回答by Rigel Networks

Use line height to add space between to line :

使用 line height 在 line 之间添加空间：

For example :

例如 ：

div {line-height:25px;} 

回答by Dash

Include the below css to give line height according to your requirement:

包括以下 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>

回答by Danield

If you want to style the line-height of only the br elements - there is away. (believe it or not)

如果您只想设置 br 元素的行高样式 - 就可以了。（信不信由你）

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

FIDDLE

小提琴

Otherwise - line-height is the way to go as other answers have stated.

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

回答by Mark

Instead of using line breaks, use paragraphs and give them a margin.

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

CSS:

CSS：

p {
    margin-top: 10px;
}

Or use the line heighton the divif you want all of the line spacing to be different even in the same paragraphs.

或者line height，div如果您希望即使在同一段落中的所有行距都不同，则使用on 。

DIV:

分区：

div {
    line-height: 10px;
}  

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

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

回答by Mark

Just do something like that

做这样的事情

HTML

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

CSS

p{margin-bottom:10px}

回答by MD Shahrouq

Thanks, We can add space between the Text and the Hoverbar by using .

谢谢，我们可以使用 .

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