如何改变高度<br>?

我有一大段的文本，分为<br>的子段落:

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

我想扩大这些分段之间的间隔，比如有两个<br>之类的。我知道这样做的正确方法是使用<p></p>，但现在我不能改变这个布局，所以我正在寻找css的解决方案。

我试着用display: block设置<br>的行高和高度，我也谷歌了一下，堆栈溢出了，但没有找到任何解决方案。在不改变布局的情况下，这可能吗?

当前回答

迈克尔和尤达都是对的。你能做的是使用<p>标签，它是一个块标签，使用底部边距来抵消下面的块，所以你可以做类似的事情来获得更大的间距:

<p>
    A block of text.
</p>
<p>
    Another block
</p>

另一种替代方法是使用block <hr>标记，使用该标记可以显式地定义间距的高度。

其他回答

迈克尔和尤达都是对的。你能做的是使用<p>标签，它是一个块标签，使用底部边距来抵消下面的块，所以你可以做类似的事情来获得更大的间距:

<p>
    A block of text.
</p>
<p>
    Another block
</p>

另一种替代方法是使用block <hr>标记，使用该标记可以显式地定义间距的高度。

而不是

<br>,<br/>,<hr> or <span></span> and trying different CSS properties to these tag.

我做了，我把段落放在一个div中，并给它行高:2px

# html

<div class="smallerlineHeight">
   <p>Line1</p>
   <p>Line2</p>
</div>

#css

.smallerlineHeight {
    p {
        line-height: 2px;
    }
}

使用< div >

<div>Content 1</div>Content 2

这允许没有任何垂直空间的新行。

这就变成了

<div>内容1</div>内容2

Css:

br {
   display: block;
   margin: 10px 0;
}

解决方案可能不跨浏览器兼容，但至少是可以的。还可以考虑设置行高:

line-height:22px;

对于谷歌Chrome浏览器，考虑设置内容:

content: " ";

除此之外，我认为您只能使用JavaScript解决方案了。

在更一般的层面上回答任何登陆这里的人，因为他们正在修复由<br>标签引起的间距问题。为了接近完美像素，我不得不做很多重置。

br {
    content: " ";
    display: block;
}

对于我要解决的特定问题，我必须在字里行间留出特定的空间。我在顶部和底部加了边距。

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}

推荐文章