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

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

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

Answer 2

использование display:block; на span,

как:

.title, .Content { display:block; } 

Answer 3

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

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

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

Или вы можете также использовать дисплей: встроенный блок;

Answer 4

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

Answer 5

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

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

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

Answer 6

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

Это то, что я сделал:

< центр > Это очень длинное название линии я хочу отображаться в моем <DIV> WordPress Заголовок строки </дел > </центр >

Действие < центр > довольно сам по себе. Поскольку <div> является элементом уровня блока, он выдает новую строку.

Надеюсь, это поможет.

Answer 7

Вы можете моделировать BR теги ширины CSS, как это:

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

Используйте селектор ": перед тем", если вам нужно "БЗ" были смоделированы до содержания поверочного

jsfiddle

Answer 8

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