Html 在换行符之间添加垂直空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13282286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding Vertical Space between Line Breaks
提问by Sammy
This seems like a common CSS question, but for some reason I cannot find the answer to it.
这似乎是一个常见的 CSS 问题，但由于某种原因，我找不到它的答案。
consider the following Code:
考虑以下代码：
<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>
With CSS ONLYI want to add vertical space between the <br/>tags.
仅使用CSS我想在<br/>标签之间添加垂直空间。
line-height works for the entire content, and attaching CSS to <br>(i.e: br{ margin:10px 0}), doesn't seem to work either (in Chrome at least), so I am wondering if this is even possible.
line-height 适用于整个内容，并将 CSS 附加到<br>（即：br{ margin:10px 0}），似乎也不起作用（至少在 Chrome 中），所以我想知道这是否可能。
Thank you.
谢谢你。
?
?
采纳答案by Sen Jacob
br
{
content: " " !important;
display: block !important;
margin:30px;
}
?try this
？尝试这个
回答by Mr. Alien
You can try this, works on chrome too, content: " "does the trick for chrome, else is happy with margins
你可以试试这个，也适用于 chrome，content: " "对 chrome 有用，否则对边距很满意
HTML
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
CSS
div{
width:150px;
border:1px solid #000;
padding:5px;
}
br {
content: " ";
display: block;
margin: 10px;
}
? ?
? ?
回答by JamesHoux
Yes its possible. There are several issues related that you need to understand.
是的，它可能。您需要了解几个相关的问题。
1) You're using margins. Sometimes margins will be collapsed or removed depending on content. Have you tried using padding instead? You will get different results. I don't have any direct links off hand but google around and make sure you understand the important differences between margins and padding.
1）您正在使用边距。有时边距会根据内容折叠或删除。您是否尝试过使用填充？你会得到不同的结果。我手头没有任何直接链接，但谷歌搜索并确保您了解边距和填充之间的重要区别。
2) Learn about the box-models. If you don't know about box-model: border-box, then you need to go study it. Chris Coyier of css-tricks.com has an article on it. I'm pointing it out because its directly pertinent to issues like this one.
2) 了解盒模型。如果你对 box-model:border-box 一无所知，那么你需要去研究它。css-tricks.com 的 Chris Coyier 有一篇关于它的文章。我指出这一点是因为它与此类问题直接相关。
3) display:block I don't know for certain but I think
probably defaults to display: inline. You can any element it and always make it act like a standard block DIV if you set display: block as one of the properties. Again, Chris Coyier has some great information on this. Please make sure you have a deep appreciation of display: rules and their caveats.
3) display:block 我不确定，但我认为
可能默认为 display: inline。如果您将 display: block 设置为属性之一，您可以使用任何元素，并始终使其像标准块 DIV 一样工作。同样，Chris Coyier 有一些关于这方面的重要信息。请确保您对展示有深刻的理解：规则及其注意事项。
Just adding display: block and either using margins or padding will fix your problem. If it doesn't, there's something stupid simply I'm missing. I've done this type of thing before. In fact, I've completely removed
tags from Wordpress theme markups using display: none to completely reformat image gallery outputs.
只需添加 display: block 并使用边距或填充即可解决您的问题。如果没有，那么我缺少一些愚蠢的东西。我以前做过这种类型的事情。事实上，我已经
使用 display: none 从 Wordpress 主题标记中完全删除了标签，以完全重新格式化图片库输出。
