Чем заменить тег br?

#html #css

Чем можно заменить тег 
, чтобы не повторять его множество раз в html разметке?    

Ответы

Ответ 1

например:
 


или:



Ответ 2

div'ом фиксированный высоты.
Внутри него нужен только 1 
, а можно и не 
, а скажем   — просто чтобы
div самопроизвольно не удалился.


Ответ 3

Вам что нужно, отступы? все решается стилями в css и классами там же. Слышали про
классы?))
Тегам p присвойте один отступ, блокам div - другой и везде можно применять классы,
зачем пихаете этот мусор, не понятно, тем более, как видно, пихаете не в текст, а в
разметку, т.е. изначально губите шаблон.
Часто вижу в приносимых на очеловечивание шаблонах упомянутый тег br: поминаю неким
словом предыдущего верстальщика, вооружаюсь топором и надфилем, и открываю стилевой файл...


Ответ 4

Вопрос частый среди новичков, а развёрнутого ответа с рабочими примерами видеть не
доводилось. Попробую дать таковой сам.



1. Разделение абзацев

Положим, необходимо отделить один блок текста от другого.

1. C использованием 


Два блока текста отделяются посредством 

.




    От колумеллы завернул на срисованный с топографической карты мост греческого
носа, разогнался и очутился перед ширью чела, усеянной едва приметными эфемеридами.
Отдельно торчащие волоски обрамляли пушистый каскад, вуалью из тончайшей паутинки прикрывая
внитие в пробор посередине. Нежная кожа руки, несомненно, ароматнее цветов на иконах
ниже... Тщательно протёр зенки: стоп, я не Виктор Кандинский во власти дебютной галлюцинации.
    


    Однако стоило попутчице с ближнего ко входу сидения подвинуть локоть, как проступили
пухленькие губки, слабо напоминающие Божьи. Они принадлежали высокой мощной путешественнице
с неуклюжей широкой походкой, непринуждённо закинувшей наверх свой и подруги громадные
рюкзаки. Помимо профиля с закрытыми очами в ней не содержалось ни на йоту от Эталона,
чего, правда, вполне хватало для любования. Тут осенило, как провести эту обездвиживающую
и притупляющую ночь.





2. Без использования 


Каждый из двух блоков текста заключается в тег 
.




    
От колумеллы завернул на срисованный с топографической карты мост греческого
носа, разогнался и очутился перед ширью чела, усеянной едва приметными эфемеридами.
Отдельно торчащие волоски обрамляли пушистый каскад, вуалью из тончайшей паутинки прикрывая
внитие в пробор посередине. Нежная кожа руки, несомненно, ароматнее цветов на иконах
ниже... Тщательно протёр зенки: стоп, я не Виктор Кандинский во власти дебютной галлюцинации.
    
Однако стоило попутчице с ближнего ко входу сидения подвинуть локоть, как
проступили пухленькие губки, слабо напоминающие Божьи. Они принадлежали высокой мощной
путешественнице с неуклюжей широкой походкой, непринуждённо закинувшей наверх свой
и подруги громадные рюкзаки. Помимо профиля с закрытыми очами в ней не содержалось
ни на йоту от Эталона, чего, правда, вполне хватало для любования. Тут осенило, как
провести эту обездвиживающую и притупляющую ночь.





3. Компиляция Markdown в HTML.

Оборачивание вручную каждого блока текста может занять достаточно продолжительное
время. Однако есть средства, облегчающие задачу, как то использование разметки Markdown,
— не только по моему мнению много удобнее нативного HTML — с последующей конвертацией
в HTML. Для создания отступа в Markdown достаточно создать между блоками текста пустую
строку:

От колумеллы завернул на срисованный с топографической карты мост греческого носа,
разогнался и очутился перед ширью чела, усеянной едва приметными эфемеридами. Отдельно
торчащие волоски обрамляли пушистый каскад, вуалью из тончайшей паутинки прикрывая
внитие в пробор посередине. Нежная кожа руки, несомненно, ароматнее цветов на иконах
ниже... Тщательно протёр зенки: стоп, я не Виктор Кандинский во власти дебютной галлюцинации.

Однако стоило попутчице с ближнего ко входу сидения подвинуть локоть, как проступили
пухленькие губки, слабо напоминающие Божьи. Они принадлежали высокой мощной путешественнице
с неуклюжей широкой походкой, непринуждённо закинувшей наверх свой и подруги громадные
рюкзаки. Помимо профиля с закрытыми очами в ней не содержалось ни на йоту от Эталона,
чего, правда, вполне хватало для любования. Тут осенило, как провести эту обездвиживающую
и притупляющую ночь.


Как видно, результаты компиляции для различных парсеров Markdown в HTML имеют небольшие
различия, но везде блоки текста оборачиваются в тег 
 и не используется 
.



2. Отступы

Допустим, в декоративных целях требуются множество пустых линий между двумя элементами.

1. C использованием 


Отделяем друг от друга текст и изображение.




    



    
Саша и Её кот
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    





2. Без использования 





    
    
Саша и Её кот
    





Используется свойство CSS margin. Допускается использование от одного до четырёх
значений margin, в примере их 3. Первый ноль задаёт отступ от верхнего края элемента,
второй — от левого и правого одновременно, третий — от нижнего. Т.е. от блока текста
до нижеследующего элемента — иконы — в примере задан отступ, равный 10rem.

Отступы посредством margin корректно работают, если их задать от блочных, не инлайновых
элементов.



3. Дополнительные ссылки

1. Где не стоит использовать 
 и причины тому


Is it sometimes bad to use 
?
Is a br tag semantic?.


2. Использование тега 
 в качества разделителя параграфов


Bed and BReakfast markup (B&BR).


3. margin


О свойстве margin на сайте Webref.ru.


Ответ 5

C помощью CSS. 
После первого параграфа, добавлен дополнительный разрыв.



p::before {
  content: '\A';
  white-space: pre;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.