4

这似乎是一个常见的 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/>标签之间添加垂直空间。

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

谢谢你。

jsfiddle

​</p>

4

3 回答 3

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

试试这个

于 2012-11-08T04:20:48.810 回答
4

你可以试试这个，也可以在 chrome 上工作，对 chromecontent: " "有用，否则对边距很满意

演示

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

​ ​</p>

于 2012-11-08T04:21:35.473 回答
1

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

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

2) 了解盒子模型。如果你不了解 box-model:border-box，那么你需要去研究它。css-tricks.com 的 Chris Coyier 有一篇关于它的文章。我指出它是因为它与此类问题直接相关。

3）显示：块我不确定，但我认为
可能默认为显示：内联。如果您将 display: block 设置为属性之一，您可以使用任何元素并始终使其像标准块 DIV 一样工作。再一次，Chris Coyier 在这方面有一些很好的信息。请确保您对展示有深刻的理解：规则及其注意事项。

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

于 2012-11-08T04:23:03.367 回答