如何使用CSS模拟<br/>（br标签）？

Question

我在这里有以下css和html行：

CSS：

.top, .title {
font-weight: bold;
}
.bottom, .Content {
}

HTML：

<span class='title'>Title</span>
<br/>
<span class='Content'>Content</span>
<br/><br/>

我想将<br/>标记替换为CSS中的等效标记，但我正在努力解决它。我将不胜感激任何帮助。

我已经尝试过margin-bottom，margin-top，line-height，但都没有。

Answer 1

您可以像这样模拟BR标签宽度CSS：

span:after {
    content: ' ';
    display: block;
}

如果您需要在跨度内容

之前模拟“br”，请使用选择器“：before”

jsfiddle

Answer 2

从语义上讲，您可能希望为标题使用标题标记（h1，h2等），并为内容使用段落标记（p）。这两个都是块级元素，margin和line-height之类的东西都适用。

span标记是一个内联元素，（对于所有意图和目的）意味着它意味着进入块级元素的中间而不会弄乱标记的其余部分。

如果你真的想留下一个跨度，那么你可以通过给它一个CSS属性display: block来强制跨度表现得像块级元素。我建议您使用实际的块级元素，例如h1或p标记。

Answer 3

<span>是一个内联元素，因此无法应用margin，但可以padding - 给它类似.title { padding: 10px 0; }的内容，它会模拟一个段落，或只是.title { display: block; }迫使下一件事发生在它下面。

Answer 4

display: block;但是，<span>在语义上可能是使用的错误标记（是内联标记而不是块标记）; <div>可能是一个更好的匹配，并带有它已经显示为块的奖励。其他标签可能更合适。

Answer 5

在display:block;上使用span，

像：

.title, .Content { display:block; }

Answer 6

嗯，问题是您使用的是“span”，它是内联标记。 例如，您必须使用块元素才能使用margin-bottom。

你可以试试这个：

.top {
    font-weight: bold;
    display: block;
}
.bottom {
    display: block;
}

或者你也可以使用display：inline-block;

Answer 7

在处理WordPress时遇到了类似的问题。 Wordpress因自动从博客文章的用户文本中删除格式化字符而臭名昭着。我的挑战是将文章文本集中在一起，并将该行分为两部分。

这就是我所做的：

＆lt; center＆gt;这是我希望在我的＆lt; div＆gt; WordPress文章标题行＆lt; / div＆gt;＆lt; / center＆gt;

中显示的非常长的标题行

＆lt; center＆gt;的行动很明显是不言自明的。由于＆lt; div＆gt;是一个块级元素，它发出一个新的行。

希望这有帮助。

Answer 8

<style>
p.break{
    display:block;
    clear: both;
}
</style>