Html 如何使用 CSS 模拟 <br/>（br 标签）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9185157/
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
How do I simulate <br/> (the br tag) using CSS?
提问by user717236
I have the following line of css and html here:
我在这里有以下 css 和 html 行：
CSS:
CSS：
.top, .title {
font-weight: bold;
}
.bottom, .Content {
}
HTML:
HTML：
<span class='title'>Title</span>
<br/>
<span class='Content'>Content</span>
<br/><br/>
I would like to replace the <br/>tag with an equivalent in CSS, but I am struggling with it. I would appreciate any help.
我想<br/>用 CSS 中的等价物替换标签，但我正在努力解决它。我将不胜感激任何帮助。
I've tried margin-bottom, margin-top, line-height, none of it worked.
我试过 margin-bottom、margin-top、line-height，都没有奏效。
采纳答案by Joe
<span>is an inline element, so can't have marginapplied, but it can take padding- give it something like .title { padding: 10px 0; }and it'll simulate a paragraph, or just .title { display: block; }to force the next thing to go beneath it.
<span>是一个内联元素，所以不能margin应用，但它可以采取padding- 给它类似的东西.title { padding: 10px 0; }，它会模拟一个段落，或者只是.title { display: block; }强制下一个东西在它下面。
回答by Viter Rod
回答by Jemaclus
Semantically, you would want to use a heading tag (h1, h2, etc) for the title and a paragraph tag (p) for the content. Both of those are block-level elements, for which things like marginand line-heightwork.
从语义上讲，您可能希望对标题使用标题标记（h1、h2 等），对内容使用段落标记 (p)。这两个都是块级元素，它们喜欢margin和line-height工作。
A spantag is an inline element, which (for all intents and purposes) means that it's meant to go in the middle of a block-level element without messing up the rest of the tag.
一个span标记是一个内联元素，这（对所有意图和目的）的手段，它的意思在块级元素的中间去无搞乱了标签的其余部分。
If you really want to stay with a span, then you can force the span to behave like a block-level element by giving it the CSS property display: block. I recommend that you use actual block-level elements such as h1or ptags, though.
如果你真的想保留一个跨度，那么你可以通过赋予它 CSS 属性来强制跨度表现得像块级元素display: block。不过，我建议您使用实际的块级元素，例如h1或p标签。
回答by Chris Morgan
display: block; however, <span>is semantically probably the wrong tag to use (being an inline tag rather than a block tag); <div>is probably a better match, and comes with the bonus that it already displays as a block. Other tags might be more appropriate still.
display: block; 然而，<span>在语义上可能是错误的标签（作为内联标签而不是块标签）；<div>可能是更好的匹配，并且带有已经显示为块的奖励。其他标签可能更合适。
回答by Shpetim
use display:block;on span,
使用display:block;上span，
like:
喜欢：
.title, .Content { display:block; }
回答by Chris
Well, the problem is that you are using a "span" which is an inline tag. You have to use block element to be able to use margin-bottom for example.
好吧，问题是您使用的是“跨度”，它是一个内联标签。例如，您必须使用块元素才能使用 margin-bottom 。
You could try this:
你可以试试这个：
.top {
font-weight: bold;
display: block;
}
.bottom {
display: block;
}
Or you could also use display: inline-block;
或者你也可以使用 display: inline-block;
回答by Dean Logan
I had a similar problen when dealing with WordPress. Wordpress is notorious for automatically removing formatting characters from a user's text for a blog article. My challenge was to center the article text and split the line into two.
我在处理 WordPress 时遇到了类似的问题。Wordpress 因自动从用户的博客文章文本中删除格式字符而臭名昭著。我的挑战是将文章文本居中并将该行分成两行。
This what I did:
这就是我所做的：
<center>This is a very long title line I want displayed in my <div>WordPress Article Title Line</div></center>
<center>这是一个很长的标题行，我想显示在我的 <div>WordPress 文章标题行</div></center>
The action of the <center> is pretty self-explanatory. Since a <div> is a block-level element, it issues a new line.
<center> 的操作是不言自明的。由于 <div> 是块级元素，因此它发出一个新行。
Hope this helps.
希望这可以帮助。
回答by user3162041
<style>
p.break{
display:block;
clear: both;
}
</style>
