Какие свойства CSS может иметь тег br?

Я сейчас бездельничаю с кодом, а для разделения двух абзацев я использую тег br. Чтобы поместить интервалы между абзацами, я заметил, что могу использовать либо поле, либо отступ, чтобы выполнить то же самое. Когда я пытаюсь сделать другие стили, такие как добавление границы, это не работает.

Почему у тега br могут быть только одни стили, но нет других? Я искал по всему, и я прочитал различные статьи/руководства, которые противоречат друг другу о том, как можно использовать тег br.

br {
  padding: 50px;
  border: 1px solid black;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>

Ответ 1

Если вы проверите MDN, вы можете прочитать это:

Элемент <br> имеет одну четко определенную цель - создать разрыв строки в блоке текста. Как таковой, он не имеет собственных измерений или визуального вывода, и вы очень мало можете сделать, чтобы его стилизовать.

Вы можете установить маржу ¹ на <br> себя элементы, чтобы увеличить расстояние между строками текста в блоке, но это плохая практика - вы должны использовать свойство высоты строки, которая была разработана для этой цели

И, учитывая спецификацию, мы можем прочитать:

Элемент br представляет разрыв строки.

Элементы br должны использоваться только для разрывов строк, которые фактически являются частью контента, как в стихах или адресах.

Таким образом, в основном браузер просто игнорирует все стили ^{2, которые} вы применяете, так как цель этого тега - добавить разрыв строки.

Также обратите внимание, что в вашем случае br отключает разрыв полей между вашим элементом p потому что он создает анонимное поле, содержащее пустую строку:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>

Ответ 2

В этой ситуации нет необходимости использовать элемент <br> или <hr>. Тег br предназначен для перехода на новую строку, как сказано в других ответах. Вы можете просто использовать абзацы с примененным к ним CSS:

p + p { /* Matches any p tag that is directly preceded by another p tag */
  margin-top: 50px;
  border-top: 1px solid black;
  padding-top: 50px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>

Ответ 3

BR это новая строка. Почему пустой невидимый разделитель имеет границы?

Используйте границу на p - здесь я использую nth-child, чтобы указать на верхнюю часть второго абзаца - я также мог бы использовать нижнюю границу первого абзаца

p:nth-child(2) { /* second p */
  border-top: 1px solid black;
  padding-top:10px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>

Ответ 4

Темани Афифа оценка br была точечной. Как он упомянул, тег br в основном используется там, где у вас будут разрывы строк в газетах, например, для стихов или адресов.

Добавим немного: hr по сути является "функциональным" эквивалентом br. Тег hr обозначает горизонтальное правило, и он очень похож на br, за исключением того, что по умолчанию используется строка. Теги hr могут быть стилизованы больше чем теги br из-за их предназначения.

Вот код из вашего поста с тегом br:

br {
  margin: 50px;
  border: 1px solid black;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>

Ответ 5

Нет, br является новой строкой и полностью невидим, поэтому не имеет причин иметь какие-либо свойства css.