Тег — br

Браузер firefox применяет к тегу
вертикальные отступы

Приступая к вёрстке сайта с нуля я прописываю в стилях сначала, так называемый «reset-css» и добавляю свои общие стили к тегам в соответствии с дизайнами макетов. И вот в одном моменте я допустил ошибку указав следующее:
h1, h1 * {margin-bottom: 20px; font-size: 20px; font-weight: normal; line-height: 24px;}

Возможно это бы и прошло не замеченным для меня, но вот в заголовке — h1 добавили тегов <br />, и ошибка вылезла наружу.
Ошибка заключается в том, что я указал margin-bottom для «h1 *», тем самым давая нижний отступ всем вложенным тегам в заголовок.
Все браузеры пропустили тег — br, но не firefox, который добавил эти отступы и для самого заголовка и для br и вёрстка разъехалась. Даже не сразу и понял в чём дело.

И как дополнение: Рассказал коллеге (back-end разработчик) про этот казус, на что он мне сказал: «Так применение br же считается мувитоном».

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

Автор: Sober_exe

Источник ^[1]