[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック

テキスト要素を配置する際、line-heightがあると、テキストの先頭行を上ぴったりに揃えることはできません。先頭行だけline-heightでできた上スペースを取り除き、上に揃えるスタイルシートのテクニックを紹介します。 これをしたいと思った人は少なくないと思います。 先頭行の余計な余白を取り除き、ぴたっと揃えることができます。取り除くのは先頭行の上だけなので、先頭行の下やほかのテキスト要素はline-heightが適用されます。 Line-height Crop by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 先頭行だけを上に揃えるスタイルシート テクニックの解説 免責事項 はじめに 元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとし

[coliss]

先頭行だけline-heightでできた上スペースを取り除くべし

[aceraceae]

テクニックとしては美しくないなあ。

[sumithsonian]

大抵、デザインでは先頭行のline-heightがないマージンになってるので、助かるテクニック。

[uunfo]

これが必要になるシーンがさっぱりわからんが、ボックスの上マージンをマイナス指定すればいいんやろ

[diveintounlimit]

first-lineあるけどほとんどのプロパティ使えないんよ。これはバッドノウハウだと思うし基本的にマージン・パディングで調整するのが良いと思う。何かCSS周りってずっと小手先の小技っぽいのが耐えないなぁ(´・ω・｀)

[wingsgate]

テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック テキスト要素を配置する際、line-heightがあると、テキストの先頭行を上ぴったりに揃えることはできません。先頭行だけline-he

[mami-hate]

使える！

[karasunekoneko]

テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック

[kosn]

テキストの横に画像とかのボックスが並んでるシーンで必要になるよ。自分も普通にネガティブマージンでやってたけど

[yasu-log]

【B!】[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック | コリス

[aoiasaba]

めんどくさいなーと思ったけどまあ使う時もあるか・・

[kathew]

うーん？今一つやりたい場面がイメージしにくい / ネガティブマージンはバッドノウハウ感ある。フォントまわりは環境によって差異が出易いから

[konishimanabo]

Sketchでも困るやつや。

[Helfard]

どちらかと言うと下に揃える方が良くないです？

[ftype]

これ、そう簡単でもないんだよな。英文だと簡単なのかもしれんが日本語マルチブラウザだと下だけ空いたりするやつもあって本当にしんどい