增加两条线之间的间距

时间:2013-08-27 08:31:21

标签: html css

我有简单的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>

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

现在我看到如下文字。

enter image description here

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

jsfiddle

知道怎么做吗?


需要携带空间,如下图所示。 (例如我只考虑过第一行)

enter image description here

6 个答案:

答案 0 :(得分:11)

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

例如:

div {line-height:25px;} 

答案 1 :(得分:1)

根据您的要求包括以下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>

答案 2 :(得分:0)

不使用换行符,而是使用段落并给它们留出余量。

CSS:

p {
    margin-top: 10px;
}

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

DIV:

div {
    line-height: 10px;
}  

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

答案 3 :(得分:0)

做这样的事

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 :(得分:0)

如果你想设计只有br元素的行高 - 那就远了。 (信不信由你)

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

<强> FIDDLE

否则 - 行高就是其他答案所说的。

答案 5 :(得分:-1)

谢谢,我们可以使用。

在文字和悬停栏之间添加空格。
.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>