br{display:none}

20 Aug, 2006

Для меня такое правило в CSS еще недавно было удивительным, хотя может просто не было задач для него подходящих. Тем не менее, совсем недавно оно помогло решить одну не совсем тривиальную задачу. Проблема и решение...

Задача

Имеется у нас кусок HTML кода, примерно такого вида(так называемый информер ukr.net)
  1. <a href="#">Link</a><br />
  2. <a href="#">Link</a><br />
  3. <a href="#">Link</a><br />
Такой вот список линков, за разметку конечно меня можно казнить(по хорошему здесь надо использовать UL), но к сожалению, не я занимался этим проектом. Выглядит примерно так: линки в куче, невозможно разорать где один кончается и начинается другой По условию задачи, HTML изменять нельзя - ясно что эти информеры стоят еще на десятках сайтов, и просто так сменить код не получится.(хотя можно было пытаться поизвращаться над серверной частью, но я сторонник вынесения таких вещей в CSS). Итак собственно требование - нужно каким то образом научится менять расстояние по вертикали между линками. То бишь сделать отступы вверх и вниз от каждого линка.

Решение

Конечно просто сами просятся сюда такие свойства как:
  1. a{padding-top:...}
  2. a{margin-top:...}
Однако, так же очевидно эти свойства не сработают, ибо как известно они задаются для блочных(block) элементов, и на Inline'овые, как наш a, просто не подействуют.

Тогда следуя простой логике, что бы наши padding и margin стали работать, дописываем:

  1. a{display:block}
В результате имеем вот такую картину(без margin и padding): Между линками образовался двойной перенос строки. Однако все логично - каждый линк стал блочным элементом - это один перенос строки + оставшиеся BR - второй перенос строки. В результате имеем гигантское пространство между линками, намного больше чем нам нужно. И вот тут меня и спасло это не совсем стандартное правило:
  1. br{display:none}
Пока я его писал, я вообще был неуверен что оно сработает, однако после того как оно сработало - переносы строк просто исчезли, теперь уже кажется что по другому просто и быть не могло. :)

Таким образом после написания этого правила, все переносы строк в HTML аннулируются, и задав небольшой margin я заимел то что и хотел:

По сути действие br{display:none} очевидно, оно заставляет отображаться страницу так, как будто <br /> там никогда и не было.

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

Конец

Несмотря на очевидность и простоту, я как то раньше не встречался с таким решением, наверное оно достаточно узкоприменимое. Однако по крайней мере знать что так можно, я думаю невредно. Все же лучше использовать семантический HTML нетрубующий таких нестандартных решений. Надеюсь все же кому то оно упростит жизнь когда-нибудь. Живьем это сейчас висит на поиске от ukr.net

Всегда рад услышать чужой опыт по этому поводу, или просто мысли!

21 комментариев к “br{display:none}”

1.akella | 21 Aug, 2006
2Flack: давно уж пора переверстать по правилам... версия от прошлой весны еще, но не дают пока.... :( Немного стыдно - но к сожалению ничего пока поделать нельзя. У меня какое то дежа вю - я по моему уже раза 3 кому то это говорил ) И вообще! не придирайся! :) (шучу конечно, придираться надо) Спасибо Roman: нет границ человеческой изобретательности :) Хотя применение размера шрифта и кегля ) это уже как то не совсем семантично. :) Если задуматься - "к чему" мы задаем размер шрифта? :) Впрочем мой дисплей нан недалеко ушел...
2.Flack | 20 Aug, 2006
Как-то очень плохо ведет себя ukr.net при увеличении размера шрифта =/
3.faxenoff | 20 Aug, 2006
Действительно - удивительно. И почему раньше никто не пробовал? По-моему на его ещё и font-size \ line-height действовать должен.
4.Roman Rahman | 20 Aug, 2006
Конструкция показалась смутно знакомой. Поискал локально в хламе и... хотите верьте, хотите нет - нашел. В кусках страниц старого дизайна PayPal (когда то пытался сделать свой эмулятор для отладки микроплатежей). Дизайн действительно очень старый - сейчас там все поменялось буквально, а мои файлы датируются октябрем 2002. Вот там то я и увидел душераздирающие правила: BR.h5 {font-size: 5px; line-height: 5px;} BR.h6 {font-size: 6px; line-height: 6px;} BR.h8 {font-size: 8px; line-height: 8px;} BR.h10 {font-size: 10px; line-height: 10px;} BR.h12 {font-size: 12px; line-height: 12px;} BR.text_spacer {font-size: 20px; line-height: 20px;} BR.field_spacer {font-size: 28px; line-height: 28px;} BR.field_spacer_opt {font-size: 35px; line-height: 35px;} BR.ir_spacer {font-size: 20px; line-height: 20px;} Что и говорить, если HTML начинался с
5.Roman Rahman | 20 Aug, 2006
Ага, поискав хорошенько нашел сдел и в online: https://listhost.uchicago.edu/pipermail/nsit-announce/2005-December/000525.html Вот оно, основательно забытое старое.
6.пятка | 23 Aug, 2006
у br есть еще один нюанс, связанный с letter-spacing-ом парента. значение атрибута нужно обнулять.
7.warmrobot | 25 Aug, 2006
Все очень логично и красиво. Уже тихонько пропиарил это решение. :-)
8.Dan | 26 Aug, 2006
Верно, так заметно аккуратнее и логичнее выглядит и по коду и по дизайну
9.walle | 05 Sep, 2006
прикольно, зашибись! спасибо. =)
10.Lexian | 15 Oct, 2006
все гениальное просто) Конечно можно вставить в строчку пробел с маленьким размером шрифта, что бы получился такой перенос но это извращение))
11.Александр Ксейр | 17 Oct, 2006
Было бы странно, если бы не сработало.
12.Junior | 03 Nov, 2006
Хм.., сегодня утром сам применил подобный трюк, а только вечером прочел здесь. Забавное совпадение :) А вообще эта тема затрагивает другую, гораздо более проблематичную. Это компетентность авторов таких информеров. :( Ну право слово, уже зла не хватает. Например, все (!) известные мне коды счетчиков статистики по-умолчанию предлагаются с некорректным кодом. Исключение, пожалуй, Google Analytics. Но там тегов вообще нет.
13.tapazukk | 04 Nov, 2006
Интересный способ,но обычно пользуюсь увеличением line-height ,как показал пример выще Roman Rahman.
14.Komarova | 25 Aug, 2007
Хм... никогда бы не додумалась :) Спасибо огромное!
15.Женя | 14 Sep, 2007
Мдя... а про line-height ты когданибудь слышал? Решение не очевидное, а скорее глупое.
16.akella | 15 Sep, 2007
Я очень высоко ценю вашу мудрость и опыт Евгений. Но увеличение лайн-хейт очевидно увеличит расстояния между _строками_ текста а не _пунктами_ информера. Это разные вещи если пункт информера занимает более одной строки. Подумайте об этом.
17.Тормоз | 07 Nov, 2007
Эх, а у меня сейчас сложнее проблемка. Когда просто в тексте эти br используются вместо абзацев. Тогда и line-height использовать нельзя, и удалять их смысла нет, ведь тогда не к чему прицепиться. Пока даже не знаю, что делать. Возможно, придется кумекать над сложной системой преобразования br в абзацы. Но это очень непросто, они ведь могут несколько подряд быть, а где-то могут быть вполне уместными... В общем, серьезная заморочка :)
18.Тормоз | 07 Nov, 2007
Прикольно. Оказывается, можно сделать его блочным и указать нижний отступ... но поймёт это лишь FireFox.
19.Тормоз | 07 Nov, 2007
Зато FireFox не понимает before и after для br :) Пипец.
20.akella | 08 Nov, 2007
Могу посоветовать разве что br+br+br{display:block} или что то в таком духе...
21.Del'ka | 17 Apr, 2008
прикольно! но более логичным мне кажется вариант присвоения для ссылок display: inline-block (для Mozill'ы - -moz-inline-box) - начинают работать padding и margin, а br сохраняет смысл. я так формы делаю.