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

这似乎是一个常见的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 ONLY我想在<br/>标签之间的垂直空间。

整个内容的行高度作品，以及附加CSS到<br>（即：br {margin：10px 0}），似乎也不工作（至少在Chrome中），所以我想知道这是否是这个甚至有可能。

谢谢。

jsfiddle

来源

2012-11-08 Sammy

是有一个原因，你不能只是把

？ –

或更好的是，'

'？ – sachleen

我无法控制内容。这就是为什么我只写CSS。也不允许任何JavaScript。 – Sammy

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

试试这个

来源

2012-11-08 04:20:48

坏主意。不要使用“内容”。它的CSS-3具体，它的尴尬。获得
标签的行为就像是一个可风化的块是你想要的。 – James

@Jim你有没有更好的方法来做到这一点？据我所知，这是限制OP的唯一方法。 – sachleen

这工作。虽然Alien先生给出的答案更清洁。我将这件作品授予了Sen Jacob，因为他先回答了。不需要“！重要”标签和内容可以是内容：“”。谢谢。 – Sammy

你可以试试这个，适用于Chrome也content: " "确实为镀铬的伎俩，否则是满意的利润

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; 
}

来源

2012-11-08 04:21:35

请给我解释-1请 –

坏主意。它的css 3具体和它的尴尬。您将内容添加到应视为面向风格的内容中。使BR标签像块元素一样工作或使用适当的填充是你想要的。内容属性是一种破解。你不应该破解这个。 – James

@PerfectDark这是我能得到的最好的，否则我会建议使用JavaScript代替或使用div并给它一个高度 –

是其可能的。有几个问题需要了解。

1）您使用的利润率。有时候利润率将根据内容而被折叠或删除。你有尝试过使用填充吗？你会得到不同的结果。我没有任何直接链接，但谷歌周围，并确保您了解边距和填充之间的重要差异。

2）了解箱车型。如果你不知道box-model：border-box，那么你需要去研究它。 css-tricks.com的Chris Coyier写了一篇文章。我指出它是因为它直接关系到像这样的问题。

3）显示：块，我不知道某些但我想大概
默认显示：内联。如果将display：block设置为属性之一，则可以使用任何元素并始终使其像标准块DIV一样工作。同样，克里斯Coyier有关于此的一些伟大的信息。请确保您对展示有深入的了解：规则及其注意事项。

只需添加显示：块，要么使用保证金或填充将解决您的问题。如果不是这样，我只是缺少一些愚蠢的东西。我之前做过这种事情。事实上，我已经使用display：none从Wordpress主题标记中完全删除了
标签，无法完全重新格式化图片库输出。

来源

2012-11-08 04:23:03 James

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

回答

相关问题