h2 の後ろに<span>を入れるとh2の後ろに余白ができる

Question

「川口市・戸田市」と、「の」の間にある余白を消したいのですが、

パディングやマージンを使って幅を調整しても、うまくいきません。

どなたかわかる方いれば教えていただけいるととても助かります。

<h2 class="pc__fv__center__title">川口市・戸田市
<span class="pc__fv__center__title__inner1">の</span><br>
<span class="pc__fv__center__title__inner2">トイレリフォームは<br>ARMデザインホームへお任せ</span>
</h2>
コード

.pc__fv__center__title {
  display: block;
  font-size: 70px;
  padding: 20px 0;
}

.pc__fv__center__title__inner1 {
  display: inline-block;
  font-size: 50px;
  background: red;
}

.pc__fv__center__title__inner2 {
  display: inline-block;
  background: #fff;
  font-size: 40px;
}
コード

Answer 1

yambejpさんの言う通り、改行が空白文字として表示されることが原因ですね。
ソースの可読性を求めなければ単純に改行をなくしてしまっても良いと思います。

<h2 class="pc__fv__center__title">川口市・戸田市<span class="pc__fv__center__title__inner1">の</span><br>
<span class="pc__fv__center__title__inner2">トイレリフォームは<br>ARMデザインホームへお任せ</span>
</h2>

dom構造を変更してもよければ、私はよく以下のように書いたりもしますかね☺️
(クラス名は適当です)

<h2 class="pc__fv__center__title">
<span class="pc__fv__center__title__innerX">川口市・戸田市</span>
<span class="pc__fv__center__title__inner1">の</span><br>
<span class="pc__fv__center__title__inner2">トイレリフォームは<br>ARMデザインホームへお任せ</span>
</h2>

.pc__fv__center__title {
  display: block;
  font-size: 0px; /* ここがミソ */
  padding: 20px 0;
}

.pc__fv__center__title__innerX {
  font-size: 70px;
}

.pc__fv__center__title__inner1 {
  display: inline-block;
  font-size: 50px;
  background: red;
}

.pc__fv__center__title__inner2 {
  display: inline-block;
  background: #fff;
  font-size: 40px;
}

Comments

[退会済みユーザー]

改行をなくしたら無事、余白が消えました！
ありがとうございます！
DOM構造についての説明もわざわざ教えていただきありがとうございます。
助かりました！

Answer 2

改行文字がスペースとして表示されます
どうしてもいやなら

<h2 class="pc__fv__center__title">川口市・戸田市<!--
--><span class="pc__fv__center__title__inner1">の</span>

jsで処理していいなら

window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('h2').childNodes.forEach(x=>{
    if(x.nodeType=="3" && /\n/.test(x.nodeValue)){
      x.nodeValue=x.nodeValue.replace(/\n/g,'');
    }
  });
});

Comments

[退会済みユーザー]

わざわざコードを考えていただきありがとうございます。
jsでやってみます！