Он ничем не плох. Просто, как и для всего другого, для него есть своё время и место.
Скажем, если у вас короткий заголовок, часть которого вы хотите гарантированно перенести, br уместен.
/* html */
<h1>Беспорядочная <br>порядочность</h1>
Беспорядочная
порядочность
Но если вы с помощью br типографите текст или задаёте вертикальный отступы — получится плохо. Разберёмся, почему.
Типографика
Кажется логичным взять текст и вставить в него переносы так, чтобы получилось красиво:
/* html */
.text
По опросу, 43% покупателей не выбирают вещи
<br> из шерсти. Они говорят, что всё шерстяное
<br> кажется неудобным и колючим. Существует три
<br> фактора, из-за которых шерстяная вещь может
<br> вызвать зуд: чувствительная кожа, аллергия
<br> на ланолин и химические добавки.из шерсти. Они говорят, что всё шерстяное
кажется неудобным и колючим. Существует три
фактора, из‑за которых шерстяная вещь может
вызвать зуд: чувствительная кожа, аллергия
на ланолин и химические добавки.
Но проблема в том, что изменении стиля текста или ширины блока, в котором он находится, у вас всё развалится:
/* Уменьшим ширину */
.text {
font-size: 13px;
width: 200px;
}
из шерсти. Они говорят, что всё шерстяное
кажется неудобным и колючим. Существует три
фактора, из‑за которых шерстяная вещь может
вызвать зуд: чувствительная кожа, аллергия
на ланолин и химические добавки.
/* Увеличим кегль */
.text {
font-size: 20px;
width: 280px;
}
из шерсти. Они говорят, что всё шерстяное
кажется неудобным и колючим. Существует три
фактора, из‑за которых шерстяная вещь может
вызвать зуд: чувствительная кожа, аллергия
на ланолин и химические добавки.
Даже простое редактирование текста становится проблемой. Если понадобится убрать словом «колючим», вам придётся исправлять переносы на всех последующих строчках.
Если соблюсти все условия выше, всё равно могут быть проблемы. Дело в том, что каждый браузер отображает шрифты по‑своему. У него может быть свой механизм сглаживания, отличный от того, что у вас в графическом редакторе, или он может не поддерживать какие‑то фичи вашего шрифта. Из‑за этого одна из строчек может не влезть, и блок развалится:
Чтобы не было таких проблем, текст нужно оттипографить с помощью неразрывных пробелов и тега nbsp. Чтобы не делать это вручную, воспользуйтесь автоматическим типографом.
Вертикальные отступы
Если вы используете br для задания вертикальных отступов, получите сразу пачку проблем. Во‑первых, ваш отступ будет зависеть от высоты строки. Если в будущем вы её измените, отступ тоже изменится:
/* html */
<div class="rect"></div>
<br>
<br>
<div class="rect"></div>
/* css */
.rect {
height: 40px;
background: lightgreen;
}
/* css */
body { line-height: 10px; }
/* css */
body { line-height: 20px; }
Кроме этого, вы будете ограничены отступами, кратными высоте строки. А для изменения отступа вам придётся редатировать разметку везде, где этот отступ вам нужен.
Гораздо удобнее использовать для этого margin:
/* html */
<div class="rect"></div>
<div class="rect"></div>
/* css */
.rect {
height: 40px;
background: lightgreen;
margin-bottom: 15px;
}
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.