Как имитировать (тег br) с помощью CSS?

у меня есть следующая строка 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, ничего из этого не сработало.

9
css html

8 ответов

<span> является встроенным элементом, поэтому не может иметь margin применяется, но это может занять padding - дать ему что-то вроде .title { padding: 10px 0; } и это будет имитировать абзац, или просто .title { display: block; } чтобы заставить следующую вещь пройти под ней.

5

вы можете имитировать ширину тегов br CSS следующим образом:

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

используйте селектор": перед", Если вам нужно, чтобы" br " был смоделирован перед содержимым span

jsfiddle

13

семантически вы хотели бы использовать тег заголовка (h1, h2 и т. д.) для заголовка и тег абзаца (p) для содержимого. Оба они являются элементами блочного уровня, для которых такие вещи, как margin и line-height работа.

A span тег-это встроенный элемент, который (для всех намерений и целей) означает, что он должен идти в середине элемента уровня блока, не испортив остальную часть тега.

если вы действительно хотите остаться с пролетом, то вы можете заставить span ведет себя как элемент уровня блока, предоставляя ему свойство CSS display: block. Я рекомендую использовать фактические элементы уровня блока, такие как h1 или p теги, хотя.

8

display: block, однако, <span> семантически, вероятно, неправильный тег для использования (будучи встроенным тегом, а не тегом блока); <div>, вероятно, лучше подходит и поставляется с бонусом, который он уже отображает в виде блока. Другие теги могут быть еще более подходящими.

4

ну, проблема в том, что вы используете "span", который является встроенным тегом. Вы должны использовать элемент block, Чтобы иметь возможность использовать, например, margin-bottom.

вы можете попробовать это:

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

или вы также можете использовать display: inline-block;

3

использовать display:block; on span,

как:

.title, .Content { display:block; }
3

У меня была аналогичная проблема при работе с WordPress. Wordpress известен тем, что автоматически удаляет символы форматирования из текста пользователя для статьи в блоге. Моя задача состояла в том, чтобы центрировать текст статьи и разделить строку на две части.

вот что я сделал:

это очень длинная строка заголовка, которую я хочу отобразить в моей WordPress строке заголовка статьи

действие

довольно понятно. Так как
элемент уровня блока, он выдает новую строку.

надеюсь, что это помогает.

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