htmlのh1テキストの余白を消したい

Question

↓この画像の「テキストの上の余白」は仕様なので消せないのでしょうか。。

ここでの「テキストの上の余白」は、
画像の「絵画クラス」の上にある、
「青枠内の僅かな隙間」です。

marginやpaddingは関係ないと思いましたが、試しましたがダメでした。。

<h1><span>絵画</span><span>クラス</span><span class="caption">３才〜小６</span></h1>

@mixin txt_ttl {
  font-size: 36px;
}
@mixin txt-s {
  font-size: 19px;
}

.center {
  text-align: center;
}
.ttl_h1 {
  @include txt_ttl;
  position: relative;
  text-align: center;
}
.caption {
  @include txt-s;
  position: absolute;
  top: 100%;
  right: 43%;
}

h1を「GoogleChrome検証ツール」でクリックした時に出てくる画面はこちらです↓

Comments

[Yasumichi]

一応、HTML 本体と CSS を当たり障りのない範囲で追記してもらえると良いと思います。

[m.ts10806]

コピペで動作確認できるコードを提示してください。
CSSは様々な要素が絡み合っているので、画像とやったこと”だけ”を提示されてもこちらからできるアドバイスはありません。

[kei344]

画像のどの部分が「余白」ですか。

[m.ts10806]

本当にh１しかなくてmarginとpaddingを０にしたらそのような空間は出ませんからね。

[fuhixx]

誤解を招いてしまい申し訳ありません。今後、十分気をつけるよう心がけます。

ここでの「余白」は、
画像の「絵画クラス」の上にある、
「青枠内の僅かな隙間」のことを指します。

Answer 1

仕様なので消せないのでしょうか

少なくとも2020年現在は消せないと思います。
フォントはそれぞれ独自の空間を持っているので、それを消す指定は今のところありません。

【???????? ????‍???? ???? CSSのイマージョン：フォントメトリック、行の高さ、垂直方向の配置 ???? ????️ ????】
https://geeks-world.github.io/articles/J337450/index.html

1行ごとにHTML要素を区切ってしまうなど無理やりに「余白を消す」表現は可能だとは思いますが、現代的なレスポンシブデザインには向かない方法です。（ちなみにWebフォントなどでフォントの種類を固定しないと使えない技法です）

【CSS での OpenType 機能の構文】（いろいろ変更できるようにはなってきている例）
https://helpx.adobe.com/jp/fonts/using/open-type-syntax.html

Comments

[kei344]

同じ質問を連続してされているようですね。そちらで解決したのであれば当質問を解決済みにして置いてください。

【HTML - このh1タグの「青枠内の余白」は消せませんか・・？｜teratail】
https://teratail.com/questions/259012

Answer 2

仕様なので消せない、ということはないです。
試しに以下のCSSを追加してみてください。

/* 試しに追加。marginやpaddingが上書きできることが確認できたら削除 */
h1 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important; /* 行の高さ。「1」だと1文字ぶんの高さになる */
}

おそらく、以下のように、CSSセレクタの詳細度が高い箇所でh1へのCSSが記述されていると思うので、そちらを検索してみてください。

.xxxx .xxxx .xxxx h1 {
  padding: 10px 0;
}

自分なら「h1{」か「h1 {」でCSSファイル内を文字列検索します。

Comments

[fuhixx]

ご回答いただきありがとうございます。
「初回投稿の内容」で誤解を招いてしまい申し訳ありません。
今後、十分気をつけるよう心がけます。

ここでの「余白」は、
画像の「絵画クラス」の上にある、
「青枠内の僅かな隙間」のことを指します。

[new1ro]

line-height: 1 !important;
↑こちらを指定してみるといかがでしょうか?

行間をちょうせいするためのプロパティ (厳密にいうと行の高さ) です。

[new1ro]

あと

line-height: 1;
をしてもフォントによって、上記のような変な余白が出てしまうことがあります。
(游ゴシック体は、結構ズレがひどいです。)

一時的にフォントを変更してみて、余白が縮まるかをテストしてもいいのではと思います。