[CSS]文字に含まれる上下の余白を取り除いて、アイコンや画像とぴったり同じ高さにするスタイルシート

文字に含まれる上下の余白を取り除いて、矩形ぴったりの高さに、アイコンとぴったり同じ高さに、画像とツラが揃うようにするスタイルシートを生成するオンラインツールを紹介します。

「line-height」が影響して、ぴったりに揃わないことに悩んだことがあるかもしれません。そんな文字の余白を一番上と一番下の行のみ取り除きます。

文字に含まれる上下の余白を取り除く

Text Crop

文字の余白を取り除くには、疑似要素:before, :afterそれぞれに負のマージンを与えます。これで、一行でも複数行でも上下の余白のみを取り除きます。

文字の上下の余白を取り除く

文字の上下の余白を取り除く

使い方は、簡単です。
まずは、下記ページにアクセスします。

サイトのキャプチャ

Text Crop

フォントの種類・ウェイトを指定し、font-size, line-heightを定義し、上下の余白を調整します。

文字の上下の余白を調整

文字の上下の余白を調整

調整した見た目は、さまざまな要素で確認できます。
矩形ぴったり、アイコンとぴったり、画像とツラ合わせ、ボックスのパディングなど、Webページでよく使用される要素が用意されています。

サイトのキャプチャ

余白の確認

見た目が問題なければ、コードが自動生成されます。

サイトのキャプチャ

コードの生成

コードはSass用、LESS用、Stylus用の3種類です。
下記は、Sass用です。

sponsors

top of page

©2018 coliss