brをdisplay: none;で表示させないようにすると隙間ができる

Question

前提・実現したいこと

brタグの表示をなくしたいのですが思うようにいきません。
PCサイズでは改行はしないようにし、スマホサイズの時改行するようなデザインにしたいと思っています。
しかしbrタグをdisplay: none;で非表示にしたとろ、brを挟む文と文の間に隙間ができてしまいます。
今回はこの隙間をなくしたいです。
どうか教えていただけると嬉しいです。

該当のソースコード

 　　　<div class="guide">
        <p>お問い合わせ＆資料請求は
          <br class="break">
          こちら
        </p>
      </div>

.guide {
  background: #DA6B64;
  max-width: 1028px;
  margin: 45px auto;
  padding: 30px 120px;
  font-size: 28px;
  border-radius: 50px;
}

.break {
  display: none;
}

実際の表示結果

Answer 1

空白文字がある＆改行しているからです。
消してみてください。

<div class="guide">
  <p>お問い合わせ＆資料請求は<br class="break">こちら</p>
</div>

Comments

[kyoya0819]

サンプル
https://codepen.io/asuchi0819/pen/abbvXgY?editors=1100#0

[boku_Tnano]

出来ました！ありがとうございます。