=================方法1 ==================

Question

我有一段很大的文字，分为 的分段：

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

我想扩大这些分段之间的差距，比如有两个 或类似的东西。我知道正确的方法是使用，但是现在我无法更改此布局，所以我正在寻找仅限CSS的解决方案。

我已尝试将 的{{1}}和line-height设置为height，我也使用了Google搜索和Stack Overflow-ed，但未找到任何解决方案。这有可能在不改变布局的情况下实现吗？

Answer 1

的CSS：

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

解决方案可能不是跨浏览器兼容的，但它至少是这样的。另请考虑设置line-height：

line-height:22px;

对于谷歌浏览器，consider设置content：

content: " ";

除此之外，我认为你仍然坚持使用JavaScript解决方案。

Answer 2

以下是实际具有跨浏览器支持的正确解决方案：

  br {
        line-height: 150%;
     }

Answer 3

所以，上面的窥视基本上有类似的答案，但这里非常简洁。适用于Opera，Chrome，Safari和Firefox，很可能也是IE？

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}

Answer 4

另一种方法是使用 HR 。但是，这是狡猾的部分，让它看不见。

因此：

<hr style="height:30pt; visibility:hidden;" />

使用HR模拟更清洁的BR断点：Btw适用于所有浏览器!!

{ height:2px; visibility:hidden; margin-bottom:-1px; }

Answer 5

据我所知  高度，它只会强制换行。你所拥有的是一个带有一些换行符的文本，除了自动换行符，不是子段。您可以更改行间距，但这会影响所有行。

Answer 6

我刚遇到这个问题，我使用

解决了这个问题

<div style="line-height:150%;">
    <br>
</div>

Answer 7

您可以在元素上应用行高，因此行变大。

Answer 8

之前我没有尝试过:before / :after CSS2伪元素，主要是因为它仅在IE8 （这涉及IE浏览器）中受支持。这可能是唯一可能的CSS解决方案：

br:before {
    display: block;
    margin-top: 10px;
    content: "";
}

以下是example上的QuirksMode。

Answer 9

请记住（错误）使用<hr>标记按照某处的建议，将结束标记，因此请忘记该解决方案。
如果f.ex.在周围的上设置了一些样式，在插入<hr>后，其余内容的样式将消失。

Answer 10

br {   
    content: "";
    margin: 2em;
    display: block;
    margin-bottom: -20px; 
 }

适用于Firefox，Chrome和苹果浏览器。尚未在Explorer中测试过。（Windows平板电脑无法使用。）

换行符，font-size在Firefox和＆amp ;;苹果浏览器。

Answer 11

这是一个适用于IE，Firefox和Chrome的解决方案。我们的想法是将br元素的字体大小从14px的主体大小增加到18px，并将元素降低4px，这样额外的大小就会低于文本行。结果是br。下面有4px的额外空格。

br 
{ 
font-size: 18px; 
vertical-align: -4px; 
}

Answer 12

对我来说有用的是在段落标记之间添加这个内联...但不是最好的解决方案。

<br style="line-height:32px">

--------编辑---------

我遇到了与PC / Mac有关的问题......它为文本提供了新的行高，但没有进行换行......你可能想自己做一些测试。遗憾！

Answer 13

有趣的是，如果break标记以完整形式写成如下：

<br></br>

然后CSS line-height：145％有效。如果break标记写为：

<br> or 
<br/>

然后它不起作用，至少在Chrome，IE和Firefox中是如此。怪异！

Answer 14

我曾想过你可以使用：

br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

但是这对chrome或firefox无效。

以为我会提到，以防万一发生在其他人身上，我会为他们省事。

Answer 15

迈克尔和尤达都是对的。您可以做的是使用标记，作为块标记，使用底边距来偏移下一个块，因此您可以执行与此类似的操作以获得更大的间距：

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

另一种方法是使用块<hr>标记，您可以使用该标记明确定义间距的高度。

Answer 16

 将占用文字填充行的空间，您无法更改。如果你想要更大，这意味着你想要分成段落，所以添加其他。不要忘记你是最能语义的;）

Answer 17

我使用这些方法，但我不知道是否跨浏览器

=================方法1 ==================

br {
    display:none;
}

OR

=================方法2 ==================

br {
    display: block;
    margin-bottom: 2px;
    font-size:2px;
    line-height: 2px;
}
br:before {
    display: block;
    margin-top: 2px;
    content: "";
}
br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

OR

=================方法3 ==================

br:after { content: "" }
br { content: "" }

Answer 18

我必须开发一个将HTML转换为PDF的解决方案，并将表格单元格中的文本垂直居中，但除了输入普通 

之外没有任何效果

所以，在盒子外面思考，我通过调整字体大小（以pt为单位）改变了垂直尺寸。

<font style="font-size: 4pt"><br></font>

Answer 19

使用<div>

<div>Content 1</div>Content 2

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

这变为

<div>Content 1</div>Content 2

Answer 20

很抱歉，如果其他人已经说过这个，但简单的解决方案就是玩弄你的“行高”。如果在使用换行符时占用太多空间，那只是因为你的行高设置得太高了。您可以在CSS中更正此问题（但知道它会影响使用该属性的所有内容），或者您可以使用内联样式来覆盖CSS。

Answer 21

尝试在包含line-height标记的p标记上使用CSS br属性。请注意，如果要隔离它，可以id p div标记，尽管使用{{1}}进行隔离可能会更好，IMO。

Answer 22

你也可以在CSS中使用“block-quote”属性。这将使它不会影响您的单独行，但允许您为段落之间的断点或“块引号”设置参数。

更新：
我纠正了。 “blockquote”实际上是一个html属性。你使用它就像＆lt; p>和＆lt; / p＆gt;围绕你的工作。然后，您可以在css中设置块引用的参数，如

blockquote { margin-top: 20px }

希望这会有所帮助。它类似于在br上设置参数，可能是也可能不是跨浏览器兼容的。

Answer 23

您似乎无法调整BR的高度，但您可以使用display：none

使其可靠地消失

在搜索以下解决方案时遇到此页：

我有一种情况，第三方支付网关（Worldpay）只允许您自定义他们的支付页面，其中最多10k的CSS和HTML（不允许脚本）被注入模板的主体，并且在几个BR之后， FONT标签等再加上他们的DTD迫使IE7 / 8进入Quirks模式，这使得跨浏览器的定制尽可能地难以实现！

关闭BR会让事情变得更加一致......

Answer 24

如果目的是在 标记之后添加一些额外的垂直空间，而不破坏逻辑段落，这样的事情就可以解决问题。它适用于所有浏览器：

<span style="vertical-align:-37%"> </span><br>

这是一个演示页面，其中包含主题的其他一些变体：

http://www.burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

Answer 25

当我无法通过span标签获得样式间距时，这对我有用：

        <p style='margin-bottom: 5px' >
            <span>I Agree</span>
        </p>
        <span>I Don't Agree</span>

Answer 26

<span style="line-height:40px;"><br></span>

您必须在内联和每个元素上执行此操作，但它应该适用于大多数浏览器摆弄线高以获得理想的效果。如果你在每个元素上内联它，它应该适用于大多数浏览器和电子邮件（但这太复杂了，不能在这里讨论）。

Answer 27

 用于换行。
 也用于换行符，void元素或xhtml可选地需要“/”。
使用 ，浏览器将为两者分别插入两个换行符“虚拟”相同。
没有办法增加换行符的大小，因为它只是一个换行符使用可设置为隐藏（<div style="vilibility:hidden; line-height:150%;"</div>）或更好的段落的div。

Answer 28

为了解决由 标记引起的间距问题，任何登陆此处的人都会回答更一般的问题。我必须做很多重置才能接近像素完美。

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

对于我要解决的具体问题，我必须在这些线之间有一个特定的空间。我在顶部和底部添加了一个边距。

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

Answer 29

我通过使用一系列解决方案让它在IE7中工作，但主要是像Nigel和其他人所建议的那样将Br包装在DIV中。添加了ID并在=“server”运行，因此我可以在从复选框行中删除复选框时删除BR。

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}

<div class="narrow" run at="server"><br></br></div>

Answer 30

可能使用两个br标签是适用于所有浏览器的最简单解决方案。但这是重复的。

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>

Answer 31

仅添加一个段落而不是像这样的换行符

bla la la bla bla bla abla la bla bla bla abla la bla bla a

bla la bla bla bla bla abla la bla bla bla bla la bla bla bla a

bla la bla bla bla abla la bla bla bla abla la bla bla bla a

然后，您可以指定lineheight或padding或用于该p的任何内容

Answer 32

代替

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

我做到了，我将段落放在div中，并赋予了它 line-height：2px

#html

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

#css

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

Answer 33

我知道这是一个古老的问题，但是对我来说，它实际上是通过使用带有空白的空白段落来实现的：

<p class="" style="margin: 4px;"></p>

增大或减小边距大小将增加或减小元素之间的距离，就像边框会一样，但可以调整。

最重要的是，它与浏览器兼容。

Answer 34

在 Markdown 中使用一些 HTML，不得不在列表中强制使用   导致过于狭窄，给定的解决方案都没有按预期工作（至少在我的设置中）

结束了

<div style="height:10px;font-size:10px;">&nbsp;</div>

我发现它 here，非常接近 dorogz 的建议。当然对于标准需求 CSS 更好

Answer 35

可能很容易找到一个解决方案，你只需要创建不同类型的
。似乎对我有用。

示例：（HTML代码）

<br/ class="150%space">

（css代码）

br[class='150%space']
{
   line-height: 150%;
}

如何改变一个高度？

35 个答案:

=================方法1 ==================

=================方法2 ==================

=================方法3 ==================