line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 Webサイトのコーディング(実装)では、デザインデータ通りの数値を反映しているにも関わらず、ブラウザ上の表示がデザインデータと比べてずれる(余白が大きくなりすぎる)場合があります。 これはブラウザのline-heightの仕様によるものですが、line-height制御の難しさがデザインデータとコーディング後(ブラウザ表示)の余白のずれにつながっていると考えています。 この問題を解決するため、line-heightの不要な上下の余白を打ち消すCSSを試したところ効果を実感できたので、この方法のメリット・デメリットや活用についてまとめました。 チームで進めている実際のプロジェクトでこの方法を試してから、2020年1月の時点で9ヶ月ほど経ちますが、メリットとデメリットを比較してメリットが完
![line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 | Yuya Kinoshita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6b341fd86652cc7c64b8d28432a72479c72ab1c2/height=288;version=1;width=512/https%3A%2F%2Fyuyakinoshita.com%2Fwp-cms%2Fwp-content%2Fuploads%2Feyecatch-line-height-crop.png)