2018年04月3日(火)
[CSS]文字に含まれる上下の余白を取り除いて、アイコンや画像とぴったり同じ高さにするスタイルシート
@mixin text-crop($line-height: 1.3, $top-adjustment: 0px, $bottom-adjustment: 0px) {
// Configured in Step 1
$top-crop: 9;
$bottom-crop: 8;
$crop-font-size: 36;
$crop-line-height: 1.2;
// Apply values to calculate em-based margins that work with any font size
$dynamic-top-crop: max(($top-crop + ($line-height - $crop-line-height) * ($crop-font-size / 2)), 0) / $crop-font-size;
$dynamic-bottom-crop: max(($bottom-crop + ($line-height - $crop-line-height) * ($crop-font-size / 2)), 0) / $crop-font-size;
// ...
author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV
[ユーザー投稿] 長野県にある国内最大のスノーリゾート「白馬バレー」が実施する観光PRをプライベートDMP「Rtoaster」で支援
NEXT ›
[ユーザー投稿] 【4/20無料】生活者のインサイトを発見する!話題のソーシャルリスニング活用セミナー
関連記事
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『[CSS]文字に含まれる上下の余白を取り除いて、アイコンや画像とぴったり同じ高さにするスタイルシート』についてまとめています。
この記事は特にフォント・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。