Question

这似乎是一个常见的CSS问题，但由于某种原因，我找不到答案。

请考虑以下代码：

<div style="width:50px;border:1px solid #000">
    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
    <br/>
    2nd line
    <br/>
    3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 
    <br/>
    last line
</div>

仅使用 CSS 我想在<br/>标记之间添加垂直空间。

行高适用于整个内容，并将CSS附加到<br>（即：br {margin：10px 0}），似乎也不起作用（至少在Chrome中），所以我是想知道这是否可能。

谢谢。

jsfiddle

Answer 1

你可以尝试这个，也适用于chrome，content: " "可以解决Chrome问题，否则对边距感到满意

Demo

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
    <br/>
    2nd line
    <br/>
    3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 
    <br/>
    last line
</div>

CSS

div{
    width:150px;
    border:1px solid #000;
    padding:5px;
}

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

Answer 2

br
{
    content: " " !important;
    display: block !important;
    margin:30px;
}

试试这个

Answer 3

是的，可能。您需要了解几个与之相关的问题。

1）您正在使用保证金。有时边距会根据内容折叠或删除。你尝试过使用填充吗？你会得到不同的结果。我手头没有任何直接链接，但谷歌周围并确保你了解边距和填充之间的重要区别。

2）了解盒子模型。如果您不了解box-model：border-box，那么您需要继续学习它。 css-tricks.com的Chris Coyier有一篇文章。我指出它是因为它与这样的问题直接相关。

3）显示：阻止我不确定但我认为可能默认显示：内联。如果将display：block设置为其中一个属性，则可以使用任何元素并始终使其像标准块DIV一样运行。 Chris Coyier再次提供了一些很好的信息。请确保您对展示：规则及其警告有深刻的了解。

只需添加display：block并使用边距或填充将解决您的问题。如果它没有，那么我只是缺少一些愚蠢的东西。我以前做过这种事。实际上，我已经使用display：none完全删除了Wordpress主题标记中的
标签，以完全重新格式化图库的输出。

在换行符之间添加垂直空间

3 个答案: