html 余計な余白が消せない

Question

前提・実現したいこと

DWのHTMLでコーディングしています。

発生している問題・エラーメッセージ

h１の中にボタンエリアをdivで設定したら、h1の下にも同じ分だけ空白が入ってしまい、消すことができません。

該当のソースコード

<header>
  <div class="p_head">
    <p>スキル・知識・年齢不問！完全在宅でOK！</p></div>
  </header>
<h1 class="mb00"><img src="images/p_main_02.jpg" alt="">
    <div class="main_area_btn">
    <p class="btn"><img src="images/btn_03.png" alt=""></p></div>
</h1>

コード

.main_area_btn {
    width: 437px;
    height: 204px;
    left: 525px;
    top: -235px;
    position: relative;
}

.btn {
    position: absolute;
    bottom: 5px;
    left: 30px;
}

試したこと

補足情報（FW/ツールのバージョンなど）

写真の様にラインボタンを設定する為に、
htmlでメインエリアボタンを書き、
cssで大きさを指定しました。
画像の下に設定した箱が表示されたので、
cssで位置を調整しましたが、エリアボタン（青枠）と同じ分だけ余白が（ピンク矢印）が消せません。

Comments

[YND_teratail]

画像のどこを指しているのでしょうか。わかりやすくしてくれると嬉しいです。

また、ソースコードが一部過ぎてわからないので、できればソースコードを全て載せてくれると嬉しいです。

[m.ts10806]

>該当のソースコード
これコピペで同じもの再現できますか？

[jamiila1120]

ご回答ありがとうございます。

補足で説明と、スクショを添付しました。

[m.ts10806]

当然ながら、画像ではコピペできません。

[m.ts10806]

「コピペで他者が再現できる情報を提示すること」が質問する際の最低条件です。厚意でアドバイスをする相手に「手で打て」と？

[m.ts10806]

というのはだいぶ厳しめの指摘ですけど、
手で打つと間違いが起きますからね。
画像だと全て見れるわけではないし。
間違いなく現象を再現するためには
コードをコピペできる状態で提示するしかないわけです。
マークダウンのcode機能を利用して。
https://teratail.com/questions/238564

[jamiila1120]

ご指摘ありがとうございます。
やってみたんですが、こちらでよろしいでしょうか？

Answer 1

こんにちは。

position: relativeは相対配置などと呼ばれていて、通常配置と同じ場所の空間を占拠します。
ですので、topなどで場所を動かしても、その場所には要素があるかのように後続が配置されますので、他の要素が配置されず空白になります。

相対位置指定の要素は文書中の通常の配置から、指定された量だけオフセットしますが、ほかの要素にはオフセットの影響を与えません。

相対位置指定 | position - CSS: カスケーディングスタイルシート | MDN

---

解決方法ですが、position: absoluteを使ってみてはどうでしょうか。

Comments

[jamiila1120]

ご親切にありがとうございました。
なんとか解決することができました。
ありがとうございました。