line-heightの1行目の上余白だけ消したい

Question

###前提・実現したいこと
line-heightで発生する1行目の上の余白だけ消したいです。
調べても出てこなかったです。。
すみませんがご回答頂けますと幸いです。

使用する状況は、アイコンの横に文章が並ぶレイアウトで
・文言が1行で終わる時はアイコンに対して縦中央そろえ（vertical-align: middle）
・文言が2行以上の場合、文言がtopに揃う（vertical-align: top）

というイメージです。。

2行以上になった場合、文言をアイコンの高さと揃えたいのにlineheightのせいで文言に上アキが出るので解消したいです。。

cssはシングルクラスで書いています。

###該当のソースコード

            <div class="faqList__body__table">
              <div class="faqList__body__icon"><span>A</span></div>
              <p class="faqList__body__txt">この文章はダミーです。文字の大きさ、量、字間、</p>
            </div>

.faqList__body__table {
  display: table;
}

.faqList__body__icon {
  position: relative;
  display: block;
  margin-right: 20px;
  width: 45px;
  height: 45px;
  border-radius: 23px;
  float: left;
  font-family: "Montserrat", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック体", "Yu Gothic", "YuGothic", "メイリオ", "Meiryo", sans-serif;
  font-weight: 700;
  font-size: 1.28571rem;
  line-height: 1.1;
  background-color: #cb4e0c;
}

.faqList__body__icon > span {
  content: "";
  display: block;
  text-align: center;
  position: absolute;
  margin-top: -10px;
  padding: 0;
  top: 50%;
  left: 0;
  right: 0;
  color: #fff;
}

.faqList__body__txt {
  display: table-cell;
  font-size: 1.14286rem;
  line-height: 2;
  vertical-align: middle;
}

Answer 1

疑似要素:first-lineを使ってみてはいかがでしょうか。ブロック内の「1行目」にだけに反映されるスタイルが記述できます。

p {
  line-height: 2;
}
p:first-line {
  line-height: 1;
}

Comments

[liguofeng29]

下のほうで上書きされるってことですね。

「p要素内1行目以外にline-heightを適用する」はできないでしょうか？

p:not(first-line) ← 左に似ている記載方法はありますか？

[masaya_ohashi]

上の回答通りにするだけで1行目だけline-height:1、それ以外は2のままですよ。cssはあとから書かれた要素で上書きされますが、この場合上書きされるのは1行目要素だけで、p全体で見たらline-height:2なのは維持されていますよ
https://jsfiddle.net/qaztwh5p/

[liguofeng29]

下のほうで上書きされるってことですね。
→ p:first-line、1行目だけ上書きされるってことでした。

ちなみに、p と p:first-lineの記載順番を入れ替えて同じ結果になりますね。
必ず後で記載したものが勝つ仕様ではなかったんですね。

[masaya_ohashi]

CSSはセレクタの要素数が高いほど優先されるという仕様もあります。同じpを指すとしても、pだけで指すものとbody pと指す場合では2要素使って指定している後者のほうが優先されます。他にも優先度に関わってくるのは!important指定であったり、外部cssによる指定＜内部cssによる指定＜タグのstyle属性による指定なども関わってきます。
あなたのいう2行目以降だけ指定したいのであれば、全体のpを使って指定、first-lineの方でそれを打ち消すような書き方をすればできます。残念ながらp:not(first-line)のように、単体のセレクタで「2行目以降だけ」を指定するものは無いと思います。

[liguofeng29]

勉強になりました、ありがとうございます。

[8-0_nyan5]

これだと、1行目と2行目の行間と2行目と3行目の行間が変わってしまうのではないでしょうか。

Answer 2

p{
line-height: 2;
margin-top: -10px;
}
いまいちどういった状況でそれをしたいのか分かりませんが、
上マージンをマイナスで指定するのはどうでしょう？

Answer 3

padding-top: 値;
をスタイルシートに加えてみるとか。
padding－スタイルシートリファレンス

ブロック要素同士の隙間・余白の調整は、
marginとpaddingでいじりますが、
ブロック要素の背景色や背景画像を使ったりする場合に、
marginでいじるべきかpaddingでいじるべきかを
しっかり考える必要があります。
今回の件は一見するとmargin-topでもpadding-topでも差し支えないように見えますが、
使い分けは知っておいたほうがいいですよ。

Comments

[takamiii_158cm]

すみません、質問文が簡潔すぎたので、もう少し詳しく書き直します。
table-cellを使用しているのでmarginが使えないのです。。

[退会済みユーザー]

であれば、該当箇所のhtmlも示してもらわないと、ズレた回答が続きますよ。

[退会済みユーザー]

表でもないところでtable,tr,tdを使ってレイアウトしてしまうと、この件のように調整がしづらくなってしまうので、divやspanを駆使してレイアウトの指定をスタイルシートを主軸に書けるようになっておくといいです。（きっとブーメラン）

[takamiii_158cm]

この状況だとtableとtable-cellを使わないとアイコンと文字が縦中央そろえにならないと思うのですが、ブロック要素で表現できる方法があれば教えて頂きたいです。。

1行だとアイコンに対して縦中央、2行以上だとアイコンに対して上揃えになるという流動的なスタイルの作り方がいまいちわかりません・・。

Answer 4

リンク内容

上記にその例があります。
確認してみてください。

Comments

[takamiii_158cm]

ありがとうございます、今回の件では使えない指定でしたがこんな方法もあるのか・・と参考になりました！