br{display:none}
Для меня такое правило в CSS еще недавно было удивительным, хотя может просто не было задач для него подходящих. Тем не менее, совсем недавно оно помогло решить одну не совсем тривиальную задачу. Проблема и решение…
Задача
Имеется у нас кусок HTML кода, примерно такого вида(так называемый информер ukr.net)
- <a href="#">Link</a><br />
- <a href="#">Link</a><br />
- <a href="#">Link</a><br />
Такой вот список линков, за разметку конечно меня можно казнить(по хорошему здесь надо использовать UL), но к сожалению, не я занимался этим проектом. Выглядит примерно так:
По условию задачи, HTML изменять нельзя - ясно что эти информеры стоят еще на десятках сайтов, и просто так сменить код не получится.(хотя можно было пытаться поизвращаться над серверной частью, но я сторонник вынесения таких вещей в CSS).
Итак собственно требование - нужно каким то образом научится менять расстояние по вертикали между линками. То бишь сделать отступы вверх и вниз от каждого линка.
Решение
Конечно просто сами просятся сюда такие свойства как:
- a{padding-top:…}
- a{margin-top:…}
Однако, так же очевидно эти свойства не сработают, ибо как известно они задаются для блочных(block) элементов, и на Inline’овые, как наш a, просто не подействуют.
Тогда следуя простой логике, что бы наши padding и margin стали работать, дописываем:
- a{display:block}
В результате имеем вот такую картину(без margin и padding):
Между линками образовался двойной перенос строки. Однако все логично - каждый линк стал блочным элементом - это один перенос строки + оставшиеся BR - второй перенос строки. В результате имеем гигантское пространство между линками, намного больше чем нам нужно.
И вот тут меня и спасло это не совсем стандартное правило:
- br{display:none}
Пока я его писал, я вообще был неуверен что оно сработает, однако после того как оно сработало - переносы строк просто исчезли, теперь уже кажется что по другому просто и быть не могло. :)
Таким образом после написания этого правила, все переносы строк в HTML аннулируются, и задав небольшой margin я заимел то что и хотел:
По сути действие br{display:none} очевидно, оно заставляет отображаться страницу так, как будто <br /> там никогда и не было.
Конечно было и второе решение этой задачи - вместо убирания br, можно было использовать отрицательный margin по вертикали для ссылок, но решение с br показалось мне намного красивее и, теперь уже, очевидней.
Конец
Несмотря на очевидность и простоту, я как то раньше не встречался с таким решением, наверное оно достаточно узкоприменимое. Однако по крайней мере знать что так можно, я думаю невредно. Все же лучше использовать семантический HTML нетрубующий таких нестандартных решений. Надеюсь все же кому то оно упростит жизнь когда-нибудь.
Живьем это сейчас висит на поиске от ukr.net
Всегда рад услышать чужой опыт по этому поводу, или просто мысли!
Как-то очень плохо ведет себя ukr.net при увеличении размера шрифта =/
Действительно - удивительно. И почему раньше никто не пробовал? По-моему на его ещё и font-size \ line-height действовать должен.
Конструкция показалась смутно знакомой. Поискал локально в хламе и… хотите верьте, хотите нет - нашел. В кусках страниц старого дизайна 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 начинался с
Ага, поискав хорошенько нашел сдел и в online:
https://listhost.uchicago.edu/pipermail/nsit-announce/2005-December/000525.html
Вот оно, основательно забытое старое.
2Flack: давно уж пора переверстать по правилам… версия от прошлой весны еще, но не дают пока…. :( Немного стыдно - но к сожалению ничего пока поделать нельзя. У меня какое то дежа вю - я по моему уже раза 3 кому то это говорил )
И вообще! не придирайся! :) (шучу конечно, придираться надо)
Спасибо Roman: нет границ человеческой изобретательности :)
Хотя применение размера шрифта и кегля ) это уже как то не совсем семантично. :) Если задуматься - “к чему” мы задаем размер шрифта? :) Впрочем мой дисплей нан недалеко ушел…
у br есть еще один нюанс, связанный с letter-spacing-ом парента. значение атрибута нужно обнулять.
Все очень логично и красиво. Уже тихонько пропиарил это решение. :-)
Верно, так заметно аккуратнее и логичнее выглядит и по коду и по дизайну
прикольно, зашибись!
спасибо. =)
все гениальное просто)
Конечно можно вставить в строчку пробел с маленьким размером шрифта, что бы получился такой перенос но это извращение))
Было бы странно, если бы не сработало.
Хм.., сегодня утром сам применил подобный трюк, а только вечером прочел здесь. Забавное совпадение :)
А вообще эта тема затрагивает другую, гораздо более проблематичную. Это компетентность авторов таких информеров. :(
Ну право слово, уже зла не хватает. Например, все (!) известные мне коды счетчиков статистики по-умолчанию предлагаются с некорректным кодом. Исключение, пожалуй, Google Analytics. Но там тегов вообще нет.
Интересный способ,но обычно пользуюсь увеличением line-height ,как показал пример выще Roman Rahman.
Хм… никогда бы не додумалась :) Спасибо огромное!
Мдя… а про line-height ты когданибудь слышал? Решение не очевидное, а скорее глупое.
Я очень высоко ценю вашу мудрость и опыт Евгений. Но увеличение лайн-хейт очевидно увеличит расстояния между _строками_ текста а не _пунктами_ информера. Это разные вещи если пункт информера занимает более одной строки. Подумайте об этом.
Эх, а у меня сейчас сложнее проблемка. Когда просто в тексте эти br используются вместо абзацев. Тогда и line-height использовать нельзя, и удалять их смысла нет, ведь тогда не к чему прицепиться. Пока даже не знаю, что делать.
Возможно, придется кумекать над сложной системой преобразования br в абзацы. Но это очень непросто, они ведь могут несколько подряд быть, а где-то могут быть вполне уместными… В общем, серьезная заморочка :)
Прикольно. Оказывается, можно сделать его блочным и указать нижний отступ… но поймёт это лишь FireFox.
Зато FireFox не понимает before и after для br :) Пипец.
Могу посоветовать разве что br+br+br{display:block} или что то в таком духе…
прикольно!
но более логичным мне кажется вариант присвоения для ссылок display: inline-block (для Mozill’ы - -moz-inline-box) - начинают работать padding и margin, а br сохраняет смысл. я так формы делаю.