タグ

ブックマーク / www.attend.jp (1)

  • brをdisplayで隠した時に空白ができる原因と対策

    br要素を使った改行には問題がたくさん PCページの時はbr要素を使った改行をCSSのdisplay:none;で消したりはしませんが、レスポンシブWEBデザインで作成したページの場合、PCで見た時とスマートフォンで見た時の改行位置を変えたい!なんて思う事もあるはずです。 そんな時にはbr要素をCSSを使って、非表示にすることで改行を無くして対応します。 CSSを一行書いただけでカンタンに対応できる!!と思っている方・・・ 残念ながらそれは間違いです。 意外な動作をするので、もう少し対策が必要になります。 主に出てくる不具合は「br要素の次に来る言葉の前に半角スペースが生まれてしまう」という点です。 この原因と対策についてお話していきます。 半角スペースが生まれてしまうHTML構造 こんな構造になっている場合、br要素を消す事で半角スペースが生まれてしまいます・・・ <p>アテンドがお手伝

    brをdisplayで隠した時に空白ができる原因と対策
    nknkt
    nknkt 2019/08/09
    “br要素を含んだ親要素の文字サイズを一度「0」にしてあげる事で、br要素後の改行に入る文字サイズを完全になくします。 そしてspan要素などを使って、見せたい文字の大きさを戻すんです。これならなんとか対応できま
  • 1