line-heightの上下の余白をなくしたい！

突然ですが、コーディングをしていて「余白の計算が面倒だ！」と思ったことはありませんか？
cssで余白をデザインそのままにつけてしまうと、line-heightの上下の余白が考慮されていないため、実際の数値とはずれてしまいます。
その度に、line-height分の余分な余白を引いて…と計算していては、とても効率が悪いですよね。
そこで今回は、line-heightの上下の余白をなくし、面倒な余白の計算を省く方法をご紹介します。

そもそもline-heightとは何か？

line-heightは、行間の余白を調整するためのCSSプロパティのことです。
行間とは、文章の行と行の間のことです。
以下のような、行間が全くない文章だととても読みずらいですよね？

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）

このように、line-heightは文字を読みやすくするためにとても重要な役割を担っています。

line-heightの余白を消す方法！

line-heightの余白を消す方法、それはずばりネガティブマージンを使うことです。
ネガティブマージンとは、marginプロパティにマイナスの数値を指定することで、要素間の余白を詰めることを言います。 
では実際に、marginプロパティにどんな数値を指定すればいいかというと、、、、、
line-heightの余白を消したい要素に「margin: -((line-height – font-size) / 2)em 0;」とするだけです！
例えば、line-heightを2としているとすると、2はfont-sizeの2倍の数値を表すので、(2 – 1) / 2で「margin: -0.5em 0;」と指定してあげればいいです。

まとめ

この方法は、指定した要素の上下のmarginが使えなくなるというデメリットはありますが、上手く活用することができれば面倒な計算をすることなく、コーディングすることが可能です。
ぜひみなさんも、1度使ってみてください！