brタグはdisplay:none;で消せる

displayとは

displayとは要素の形式を変えることができるcssプロパティです。
インライン要素にdisplay:block;を指定してブロック要素のように表示にしたり、display:none;要素を非表示にすることができます。

よくある例として

imgタグはインライン要素なので、羅列すると親要素いっぱいまで横に並べられますがimgタグにdisplay:block;を指定することで、divのように改行され縦に並べることができる

display:noneて一体どうなるの？

"要素を消せる"って言葉だけじゃなかなか感覚をつかめないという方に、こんなものを用意しました。

業界騒然！マークアップレッドがまさかのヒーローショー降板！
webサイトの出演者欄から一時的に非表示にしたい。

レッドの画像と文言をごっそり非表示にしたいと思います。

html

グリーン

ピンク

レッド

ブルー

ブラック

ではdisplay:noneを指定してみたいと思います。

css

ul li.redRanger {
	display:none;
}

• 
  グリーン
• 
  ピンク
• 
  レッド
• 
  ブルー
• 
  ブラック

真ん中にいたレッドをhtmlを修正することなくcssだけで要素をごっそり非表示にすることができました！レッド降板の緊急対応終了です。
display:none;を指定することで存在していないように見えるのです。

<br>をdisplay:noneで消すという発想がなかった

disply:noneが理解できたところでやっと本題です。
displayプロパティを初めて使ったという人の中に「<br>を消した」という人はおそらくいないかと思います。なので意外と知らない人が多いかも…？
簡単ですが実際にやってみます。

サンプル

html

速報！

マークアップレッドがヒーローショーを降板！

復帰についてはノーコメント、業界に衝撃が走る

ではこの<br>にdisplay:none;指定してみる

css

div br {
	display:none;
}

このように改行を取っ払うことができました！か、感動…！
普段あまり使うことはないのですが、レスポンシブデザインなどで有効活用することができますので、次回その事例をあげてご紹介したいと思います。