RyujiYoshida.com/blog

行間と余白

CSSでの文字や段落の余白の取り方についてずっと気になっていたことがあって、久しぶりにHTMLとCSSを書く機会があったので改めて考えてみた。

なぜタイポグラフィにおいてVertical Rhythm(バーティカルリズム)は重要な手法なのか?
http://postd.cc/why-vertical-rhythms/

上記の記事の様にCSSのline-heightを基準として余白を設定するのではなくて、書体のベースラインを基準にして余白をとりたい。
だけど、 margin や padding の値はすっきりとした数値(グリッドの倍数とか)にしたい。

結局いまのところ思いついたのは :before, :after を使ったネガティブマージンでの調整。

demo

DEMO (※左側が調整済みのもの)
http://ryujiyoshida.com/adjust-margin/

margin の値はすっきりするけど、結局 :before の値をチマチマやらなければならないのであまり解決になってない気がする……
他にもっといい方法ないものだろうか。

 

以下、参考文献など

marginとline-heightによる”真の余白”について考える
http://simpleism.net/2015/06/true-margin/

なぜタイポグラフィにおいてVertical Rhythm(バーティカルリズム)は重要な手法なのか?
http://postd.cc/why-vertical-rhythms/